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

Question

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

类似这样的：

环境.ts

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

环境.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 之类的东西？

Answer 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 中了解baseHref 和deployUrl

Answer 2

你必须使用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";注入DOCUMENT

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

然后在你的ngOnInit()

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

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

    }
  }