web related troubleshooting

Angular NET.. code-block::ERR_CERT_AUTHORITY_INVALID

If this appears in the javascript console, click on the link to open a new webpage. Now you can examine the certificate, if it is localhost then most likely chrome has this flag disabled :

chrome://flags/#allow-insecure-localhost

Set it to enabled if you want to develop localhost pages.

Angular next error

Access to XMLHttpRequest at 'https://localhost/ws/rest/orders' (redirected from 'http://localhost:4200/ws/rest/orders') from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Important

This was because of the installation of jitsi, it seemed to have created an new localhost website that is totally in the way of our proxy config.

This localhost config is in /etc/apache2/sites-enabled/localhost and it redirects all traffic for / :

<VirtualHost *:80>
    ServerName localhost
    Redirect permanent / https://localhost/
</VirtualHost>

So just disable it :

# so ...
sudo a2dissite localhost
sudo systemctl reload apache2

Angular refresh 404

In a standard app created with angular the problem is that the url

• http://localhost:4200/ is replaced with
• http://localhost:4200/planner and shows the website
• but if you hit refresh/F5 this url turns to 404 page !!

This must be a bug but other people report it as well. A simple solution however is to alter the file src/index.html :

<base href="/">
.. change that into :
<base href="./">

That is enough, now it works :) Note that the distribution directory will also change :

# before 
planner/dist/planner/index.html
# after 
planner/dist/index.html

angular width problem

There was a big problem with filling the trips in the trips-detail component. The problem description is that it does not seem to stretch the app-trip-detail component to 100% of it's parent. 200px works, 100% does not. It is in this configuration :

<div class="planner-list-item" droppable (onDrop)="onItemDrop($event)">
    <app-vehicle-block [vehicle]=vehicle [style.flex-grow]=0>
    </app-vehicle-block>
    <div *ngFor="let t of (vehicle.trips)" appTrip [trip]=t [ngClass]="{
        'selected': t.selected === true,
        'unselected': t.selected === false
    }">
        <app-trip-detail class="right" [minpercent]=minpercent [trip]=t>
        </app-trip-detail>
    </div>
</div>

Note that the "right" class looks like this:

.right {
    float: right;
    flex-grow: 1;
}

It seems like a div with ngfor does not honor the flex-grow, but just encloses it's content.

The solution : it seems that this does the trick : get rid of the extra div and build the repetition into app-trip-detail :

<div class="planner-list-item" 
    droppable (onDrop)="onItemDrop($event)" >
    <app-vehicle-block [vehicle]=vehicle [vehicle]=vehicle>
    </app-vehicle-block>

    <app-trip-detail class="flex-item right" *ngFor="let t of (vehicle.trips)" [minpercent]=minpercent [trip]=t>
    </app-trip-detail>
</div>