Angular 13 baseHref no longer works

Question

I have a large NX monorepo project containing two distinct applications and hundreds of libs. One of the applications is the main application being developed, the other is a small playground for our own internal UI component library.

In Angular 12 I could serve both of my applications simultaneously, and hit both of them in the browser at the same time. The main application is accessed at 'localhost', the playground application was accessed at the URL 'localhost/component-guide'. The build command for the playground app used --base-href=lib-playground in the command specified in package.json.

Now I have upgraded to Angular 13, and the Angular CLI has removed the --base-href option, so I can no longer pass this on the command line.

I have tried using instead "baseHref": "lib-playground" in the builder in angular.json, as well as in the application's project.json file - neither of these options has worked.

I can understand that --base-href needed to be removed from the CLI, but why does this not have a direct replacement that allowed the same functionality?

I've also tried using serve-path=lib-playground in the package.json - this appeared to have no affect at all.

I've raised an issue in the Angular CLI repo, but it is about to be closed as I have not specified a minimal reproduction, but there is no minimal reproduction, my project is enormous and contains multiple applications that both need to be served and accessed in the browser at the same time. It is not a trivial application.

Answer 1

We were running into something like this. We discovered that running the ngx upgrade commands as specified in update.angular.io actually changed deployUrl to baseHref in angular.json - however, these are BOTH still valid options to have.

We resolved the issue by setting deployUrl to "pkg/wp" (same location as the outputPath) and setting baseHref to "/" in angular.json. After doing this, everything worked as it did before the upgrade from Angular 10 to Angular 13.