HTML Base href not taken into account for link static resources and CSS

Question

I have an Angular 5 application which I deploy to a container subfolder, like webapps/myapp. I need this because I will host multiple small webapps in the same container. I'm trying to make favicon.ico and a css file from a relative path because I don't want to hardcode the name of the subfolder in html.

Please observe in the image below that on hover the 2 links hrefs point to localhost:8080 instead of the desired localhost:8080/myapp/favicon.ico and localhost:8080/myapp/assets/forms.css . I tried both with "./" and without it and no luck...

What I'm doing wrong?

Answer 1

What I'm doing wrong?

You did not specify the correct base href to begin with.

<base href="/myapp">

So this is effectively the same, as if you were on http://example.com/myapp to begin with (without specifying base ), and relative URLs would be resolve based on that initial address.

Now think about it, if you resolve the relative URL ./assets/forms.css based on the above base URL, what will the result be? http://example.com/assets/forms.css of course.

What you need is therefor

<base href="/myapp/">

with a trailing slash, to make this a “folder” to begin with.