Angular removes the base-href for some routes

Question

I have an issue where our Angular app removes/disregards the base-href when navigating to a certain component. We build our app with this command:

ng b --prod --base-href /some-base/

When deployed to our Dev and Test environment, it all works as expected. Using the Angular router, I get navigated to the correct place.

this._router.navigate(['/register']) -> https://test.myawesomeapp.com/some-base/register this._router.navigate(['/other']) -> https://test.myawesomeapp.com/some-base/other

However there is one component where after navigation the base-href in the address bar is gone. It manages to navigate to the correct component and the page works. But the URL in the address bar is now broken, because it does not contain the base-href. After this._router.navigate(['/broken']) the URL is https://test.myawesomeapp.com/broken (where did /some-base/ go?)

Any refresh on this page will give a 404 now because of the broken URL. I am not sure if this is Angular routing problem or if the problem is somewhere else.

This is a .NET Core 3.1 app with an Angular SPA. Our Dev and Test environments are hosted on IIS.

Any tips on how to approach this issue will be greatly appreciated.

Answer 1

I found my issue. In the ngOnInit() of subcomponent of the /broken -page there was a call that modified the URL:

window.history.pushState({}, 'Placeholder', this._router.url);

// `Placeholder` was not the original text, just replaced for demo purposes

I used a debug trick I found in this Stack Overflow post to find out if there were any changes to the history state.

Answer 2

It's best to set the base href in index.html of angular project

<base href="index.html">

Like this