Angular: Setting APP_BASE_HREF by environment has no effect

Question

In my Angular App I want to use environments to set the <base href=""> automatically.

I have the following relevant lines in my app.module.ts:

...
import { APP_BASE_HREF } from "@angular/common";
import { environment } from "../environments/environment";
...

...
providers: [
    { provide: APP_BASE_HREF, useValue: environment.baseHref },
    ...
  ]
...

Here are my environment-files:

environment.ts:

export const environment = {
  ...,
  baseHref: "/app/"
};

environment.prod.ts:

export const environment = {
  ...
  baseHref: "/"
};

However, when using ng build or ng build --prod, neither of the two configuration is applied to the resulting index.html.

My Configuration:

• OS: Windows 10 x64
• Angular v4.2.4
• Angular CLI v1.1.1

Thank you for taking the time!

Answer 1

That's because the APP_BASE_HREF is only used with the PathLocationStrategy, it does not alter the index.html base href. You should use the command line option for that --base-href:

ng build --prod --base-href /

From the guide:

Some developers may not be able to add the element, perhaps because they don't have access to or the index.html.

Those developers may still use HTML5 URLs by taking two remedial steps:

• Provide the router with an appropriate APP_BASE_HREF value.
• Use root URLs for all web resources: CSS, images, scripts, and template HTML files.

Answer 2

Have you tried ng build --prod --base-href <path>?

see https://github.com/angular/angular-cli/issues/1064