3

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)

  • Providing an 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.
  • Providing a 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.

tuomasi
  • 41
  • 7
  • I see the discussion on this at https://github.com/angular/angular-cli/issues/16179 -- does this imply that a deployment to prod will always and only have a base-href of "/"? – eflat Dec 03 '19 at 22:31
  • @eflat I'm afraid the question is a bit too generic - it would depend on your Angular CLI settings as well as your web server settings. But in my case: No, it will still have the base-href you specified in `angular.json`. – tuomasi Dec 05 '19 at 13:20
  • We did get our issue sorted by comparing against a new 'ng new' project. The baseUrl in tsconfig.json had been changed and we had trouble isolating that as the culprit. – eflat Dec 05 '19 at 17:57

1 Answers1

1

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.

tuomasi
  • 41
  • 7