Angular-cli build with base-href also return programs folder when using git bash

Question

I'm trying to build my angular project with the angular-cli in a MINGW64 docker box on a Windows 7 Pro machine.

In git bash, the command I am using is:

ng build --prod --base-href /appcontext/

What I am trying to do is to modify my current base tag with attribute href="/" to href="/appcontext/"

Instead I get as a result a base tag with href="C:/Program Files/Git/appcontext/".

Anyone any idea?

Answer 1

Late answer, but I faced with the similar problem and it occured that issue in MINGW (I tried to run ng-serve with --base-href parameter through GIT Bash on Windows 10). Solved just by running in Powershell instead of GIT Bash - base-href parameter is handled fine there.

Answer 2

TLDR: Replace first / with /.

---

The problem:

I also encountered this issue when using git-bash on Windows. The git-bash sees the last argument of your command

ng build --prod --base-href /directory/

as a path relative to its binary folder, and prepends the argument with that (it converts the "seems-to-be" relative path into an absolute path).

Official solution (which does not work but can be fixed):

I tried the suggested method of using a double slash at the beginning:

ng build --prod --base-href //directory/

This will not be replaced by git-bash, however, the resulting base tag effectively makes the browser to not only replace the base path of URLs, but also the hostname, which is the first part of that string. So if you serve your app on host hostname, you want the URL to be

http://hostname/directory/

but it just became

http://directory/

You can fix this by also hard-coding the hostname into the base argument:

ng build --prod --base-href //hostname/directory/

The problem here is that your build now assumes a fixed hostname. As I did not like that solution, I experimented a little bit further and found a nice alternative.

My solution (which currently works but can break in future versions):

I found a clever "hack": Replace the first slash by an HTML entity. The CLI tool puts that string untouched into the href="...", and does not (double-)escape the ampersand (which it should, IMHO). A possible entity for the slash symbol is /, so your command looks like:

ng build --prod --base-href /directory/

This looks strange, but works:

<base href="&#x2f;directory/">

That is exactly "equivalent" (in the HTML/XML sense) to

<base href="/directory/">

Note that when the Angular developers decide to "fix" this non-escaped argument in the CLI tool, this hack may no longer work, as that would result in

<base href="&amp;#x2f;directory/">

which ends up making your URLs look like

http://hostname//directory/