使用ng build从环境变量设置基本href

时间:2017-01-06 21:59:45

标签: angular angular-cli

有谁知道如何使用angular-cli实现这一目标?我希望能够将baseHref路径存储在/src/environments/environment.x.ts内的环境变量中,并根据构建期间选定的环境,设置baseHref路径。

这样的事情:

  

environment.ts

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

environment.prod.ts

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

然后致电......

ng build --prod

...让我的/dist/index.html文件显示<base href="/my-app/">

我想也许,如果我将我的环境变量命名为与build command中使用的--base-href构建选项相同,那么cli可能会选择它,但也没有骰子。

是否有人从命令行引用环境变量?像ng build --base-href environment.baseHref

这样的东西

2 个答案:

答案 0 :(得分:18)

您必须使用APP_BASE_HREF

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

请参阅angular doc

修改

由于CSS / JS不适用于APP_BASE_HREF,您可以这样做:

app.component.ts 中,通过import {DOCUMENT} from "@angular/platform-browser";

注入文档
constructor(@Inject(DOCUMENT) private document) {
}

然后在ngOnInit()

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

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

    }
  }

答案 1 :(得分:1)

您需要为生产环境编辑 angular.json。将 __BASE_HREF____DEPLOY_URL__ 常量替换为您想要的路径并享受。

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

阅读https://angular.io/cli/serve中的baseHrefdeployUrl