angularangular-clirouterangular-cli-v7

Angular 7 CLI running ng serve in my project breaks navigation for sub paths

To be clear, this is not a bug, this is a project that I inadvertently broke, I am not sure when or how.

running ng --version in my project:

Angular CLI: 7.3.4
Node: 10.14.1
OS: darwin x64
Angular: 7.2.7

When running ng serve, the app loads OK in browser at:

http://localhost:4200

When manually loading a path at the root, loads OK at:

http://localhost:4200/page

When navigating via a link within the app to a sub path from a root path of a running app, loads OK at:

http://localhost:4200/page/sub/path

However, when attempting to load a subsequent sub path in any of the following ways:

• refreshing an existing sub path in view in the browser

• attempting to manually enter and load a url at a sub path

• live reloading triggered by the CLI while viewing a sub path

http://localhost:4200/page/sub/path

In error, the app attempts to load all js files relative to the sub path and thus, fails. The app attempts to load runtime.js here:

http://localhost:4200/page/sub/path/runtime.js

when it should be loading it here:

http://localhost:4200/runtime.js

my base href is currently set to ./

With the app running, i inspected the html source, and the script tags are formatted as follows:

<script type="text/javascript" src="runtime.js"></script>

I am not sure what may have broken this project. Generating a new project works without issue. I suspect possibly a recent npm update, but i cannot be sure when this problem started. I could have inadvertently broken navigation in my code as well.

Any idea where or how to begin troubleshooting?

Solution

  • You can see that runtime.js is loading from a subpath

    http://localhost:4200/page/sub/path/runtime.js

    it looks like an issue with the relative base href, try to change it to an absolute one

    <base href="/">