CODEWITHSUNDEEP
angularangular-cli
ryanulit
ryanulit

Reputation: 5001

Set base href from an environment variable with ng build

Does anyone know how to accomplish this with the angular-cli? I would like to be able to store the baseHref path in an environment variable within /src/environments/environment.x.ts and based on the selected evironment during build, be able to set the baseHref path.

Something like this:

environment.ts

export const environment = {
  production: false,
  baseHref: '/'
};

environment.prod.ts

export const environment = {
  production: true,
  baseHref: '/my-app/'
};

And then call...

ng build --prod

...and have my /dist/index.html file show <base href="/my-app/">.

I thought maybe if I named my environment variable the same as the --base-href build option used in the build command that the cli might pick it up, but no dice there either.

Is there someway to reference an environment variable from the command line? Something like ng build --base-href environment.baseHref?

Upvotes: 38

Views: 41858

Answers (4)

Brain
Brain

Reputation: 440

This approach worked for me:

 <body>
    <app-root></app-root>
    <script>
       this.document.getElementsByTagName('base')[0]
        .setAttribute('href', window.location.pathname);
    </script>
 </body>

Why it works: when the browser loads the index.html, the base href attribute is set with the current relative path. This is all you need to load the following runtime and main and polyfill javascript files from the correct path. This works also for assets.

This approach works for the local development environment as also for production.

And you don't need an environment variable to set what should be obviously the current relative path of the index.html.

Additional note: Maybe the HashLocationStrategy is required for this kind of solution:

{ provide: LocationStrategy, useClass: HashLocationStrategy }

Upvotes: 0

Nas Tika
Nas Tika

Reputation: 29

You can edit your angular.json and set build configuration for production pointing to different tsconfing file

angular.json

"targets": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "tsConfig": "src/tsconfig.app.dev.json"
      },
      "configurations": {
        "production": {
         ...
         "tsConfig": "src/tsconfig.app.prod.json"
        }
      }
    }
...
}

tsconfig.app.prod.json

{
    "compilerOptions" : {
        "baseUrl" : "/my-app/",
        ......
    }
}

tsconfig.app.dev.json

{
    "compilerOptions" : {
        "baseUrl" : "/",
        ......
    }
}

Upvotes: 1

izimiky
izimiky

Reputation: 109

You need editing angular.json for production environment. Replace __BASE_HREF__ and __DEPLOY_URL__ constant with your desired path and enjoy.

  "configurations": {
    "production": {
      "baseHref": "__BASE_HREF__",
      "deployUrl": "__DEPLOY_URL__",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],

Read about baseHref and deployUrl in https://angular.io/cli/serve

Upvotes: 10

penleychan
penleychan

Reputation: 5470

You would have to use APP_BASE_HREF

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: environment.baseHref }]
})
class AppModule {}

See angular doc

EDIT

Since CSS/JS does not work with APP_BASE_HREF, you can do this:

In app.component.ts, inject DOCUMENT via import {DOCUMENT} from "@angular/platform-browser";

constructor(@Inject(DOCUMENT) private document) {
}

Then on your ngOnInit()

ngOnInit(): void {
    let bases = this.document.getElementsByTagName('base');

    if (bases.length > 0) {
      bases[0].setAttribute('href', environment.baseHref);

    }
  }

Upvotes: 25

Related Questions