Why appending "/" to base-href removes the need of deploy url?

Question

My angular application is bundled and deployed together with a java application. Angular AOT build is placed in the folder WebContent/app.
While taking the AOT build,

1. If I specify --base-href /app, I'm getting 404 after loading the index.html. In that case, I have to add --deploy-url /app/ during my build, for the application to be working properly.
2. But If I specify --base-href /app/ then scripts, styles, and other resources are served correctly. And there's no need to specify --deploy-url

What I could observe is that If I don't append "/" to base-href, the server request made is using the context-root - http://localhost:9080/application-name/styles.***.css and when I append the "/", server context-root is appended with app - http://localhost:9080/application-name/app/styles.***.css

Why is adding "/" at the end of base-href make all this difference?
Could someone explain this behavior as I'm not able to find anything on docs?

Thanks in Advance.

Answer 1

After some digging, I found the answer. It is not related to Angular at all.

Tha <base> tag is part of HTML Specification: Link

As MDN Doc says,

The HTML < base> element specifies the base URL to use for all relative URLs in a document. There can be only one < base> element in a document.

It is used to specify the base of relative URLs.
So coming into my problem

1. When <base href="/app"> is used, the browser treats the href as a file rather than a directory. So the base URL will not be prepended to relative URLs.
2. When <base href="/app/"> is used, the browser treats it as a directory and all relative URLs will be prepended by base URL.

More can be found out here and here