Browser doesn't reload after the local development server detected changes to the local code when developing an Angular Frontend

Given a freshly created AEM 6.5.0 project, created with an Angular Frontend using Archetype Version 23 and default parameters…

Expected Behaviour

When executing npm run start from the ui.frontend module, the development server should reload on local changes (which is also stated in the generated README.md).

Actual Behaviour

The development server detects local changes, but the browser doesn’t reload and display them. Locally Webpacked Javascript Files are not included in the HTML while a couple of files from etc.clientlibs are.

In http://localhost:4200, after the redirect to /content/myapp/at/de/home.html, there is an include of <script type="text/javascript" src="/etc.clientlibs/myapp/clientlibs/clientlib-angular.js"></script> instead of the Webpack-Includes:

<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>

[prashantonkar87]

@mzellho Those are the only changes as far as I remember. As you pointed out in your first comment, the front-end app is pointing to AEM for all script. So, if my solution didn’t work, probably you would want to remove all references to your AEM (completely disabling proxy in your front-end is one option).

[prashantonkar87]

I dont know why "/content/**/*" is proxied. I ended up doing following changes to make it work:

1. Changed the proxy configuration : "context": ["/content/**/*.json", "/etc.clientlibs/**/*", "/libs/**/*"],
2. In index.html in head tag added: <base href="/">