CODEWITHSUNDEEP
angularangular-cli
Enzo Volkmann
Enzo Volkmann

Reputation: 379

Angular: Setting APP_BASE_HREF by environment has no effect

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:

Thank you for taking the time!

Upvotes: 9

Views: 9775

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71911

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.

Upvotes: 4

Kim Kern
Kim Kern

Reputation: 60357

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

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

Upvotes: 0

Related Questions