Problem
After updating our Angular application to version 8 (including Angular CLI), URLs are not prefixed with the base href provided in the angular.json
file anymore, which essentially breaks our application
Previous, desired behaviour
When serving the French version of the app locally, opening a web page on localhost:8000
would redirect me to localhost:8000/fr
, and every URL I can navigate to from within the app would also be prefixed with /fr/
.
New, erroneous behaviour
When serving the French version of the app locally, opening a web page on localhost:8000
results in an empty page saying Cannot GET /
, since the /fr
is missing. When I open the page at localhost:8000/fr
right away, I can see the login page, but since our login flow involves a third party, when I come back to our app from said third party I only see a blank page saying Cannot GET /login
(because the /fr/
is missing).
What I have tried thus far (non-exhaustive list, but the two most promising approaches)
APP_BASE_HREF
DI token inside the AppModule
providers that would use the LOCALE_ID
as its value and removing
the baseHref
settings from the angular.json
configuration. This
works "somewhat" in that I am redirected from localhost:8000
to
e.g. localhost:8000/fr/
, but it also results in undesired redirects
because I assume the route lookup logic happens before the base href
token is injected and thus it cannot recognize the URL and redirects
to the default route.deployUrl
value inside the angular.json
configuration, to no avail.Similar issues
https://github.com/angular/angular-cli/issues/14925 is basically the exact same issue. Unfortunately, all such issues have been closed without providing an actual solution on how to restore the old behaviour.
So as I learned through https://github.com/angular/angular-cli/issues/16179, it was in fact the old behaviour that should have not been possible in the first place.
When running the app locally, you can only run one language at a time. Assuming that the app is German by default, running it would serve it at localhost:8000. When running the English version, the app would be served at localhost:8000/en. That's true for both Angular CLI 7 and 8. What changed with version 8 is simply that it will not redirect you automatically to localhost:8000/en when running the English version and navigating to localhost:8000. So for us it meant that we slightly had to adjust our dev workflow (simply by making sure we open the app at the correct address), nothing actually changed on our production environment because there all languages are live.