Angular CLI ng serve with --base-href - I do not understand its behavior

Question

I am new in Angular CLI. I am writing an new app, and in the index.html I insert base href, for example - <base href="/a/">.

When I useng serve and go to localhost:4200/a (or even localhost:4200) I see a white screen, but when I use ng serve --base-href /a/ I see my app in localhost:4200, in localhost:4200/a, and actually in every url that starts with localhost:4200 for example localhost:4200/aaaaaaa.

I do not understand this behavior.

From the documentation I understood that this flag just change the base href in index html, but I already have this base href in my index.html so why my app doesn't work just with ng serve in localhost:4200/a?

And why when I use ng serve --base-href /a/ it is not working ONLY at localhost:4200/a? what do I miss? I am really confused.

Thanks!

Answer 1

What the --base-href option does is change the value in index.html. This in turn defines the base URI for the document and is used for all relative URL within the document. The default base URI is the location of the document (index.html in this case).

Note also that the base href can technically be set to an absolute URL as well.

There is also the --deploy-url option, which webpack uses to adjust all requests for assets it manages.

You generally use this to reverse proxy your application.

Answer 2

These options have changed and current version of angular (13.3.9) and cli (13.3.6) does not support --base-href for ng serve anymore.

To serve your site under /a path you should use ng serve --serve-path a and to tell browser to use /a/ as a base path you need to update this setting in angular.json file:

• add "baseHref": "/a/" property to architect > build > options object.

The issue with being able to access your app under /a, /aaaaaaa etc. could have been related to your router configuration.

If your router is configured to resolve any route starting with /a to a component/module, then this is expected behavior.