Ionic 4 sub paths not loading when running ionic serve

Ionic Framework
1

I had an ionic 4 beta project of --type=angular that was loading at any path without issue.

Periodically, i have been updating my packages by running an npm update and am currently at:

"@ionic/angular": "^4.0.2"

as well as updated installs for the ionic cli, and am currently at:

CLI 4.10.3

I am not sure when this app loading issue started, but i suspect it was after running the last npm update or update install of the cli.

When running ionic serve my application loads correctly, and i am able to navigate to all sub paths without any issues.

However, when:

  • refreshing the browser while viewing a sub path

  • attempting to enter a url with a sub path

  • cli live reloading while viewing a sub path

the app attempts to load all js files relative to the sub path and fails to run. for example:

http://localhost:8100/page/sub/path

fails to load because the app attempts to load runtime.js here:

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

my base href is currently set to ./

When i inspect the html source, the script tags are formatted as follows:

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

If i attempt to load a page directly at the root, the application loads ok without issue like so:

http://localhost:8100 loads OK

http://localhost:8100/page loads OK

So again to recap, the app only fails to load the js assets at a sub path.

Any idea where to begin troubleshooting?

2

I have the answer.

The problem was the base href.

I changed it from ./ to just the forward slash / and that solved the issue.

I am just frustrated that i cannot remember when or why i would have changed it.