Question

有谁知道如何使用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？

这样的东西

Answer 1

您必须使用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); } }

Answer 2

您需要为生产环境编辑 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

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

2 个答案: