Search code examples
htmlcssangular5hrefweb-deployment

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

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...

enter image description here

What I'm doing wrong?

Solution

  • 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.