Angular：将 environment.ts 链接为 index.html 中的单独 JS 文件答案

【问题标题】：Angular: Link environment.ts as a separate JS file in index.htmlAngular：将 environment.ts 链接为 index.html 中的单独 JS 文件
【发布时间】：2022-12-23 22:19:53
【问题描述】：

默认情况下，Angular 配置为在构建期间将 environment.ts 文件链接到 main.js。因此，当有多个环境（以及多个 environment.ts 文件）时，我们需要在构建时决定环境。

我想要的是

只构建一次（生产模式）
部署到多个环境

那么，将 environment.ts(js) 作为一个单独的脚本包含在 index.html 中，并在部署之前的构建时间之后替换文件（例如，作为 Jenkins 管道的一部分）不是一个好主意吗？

而且，怎么做呢？有没有人以这种方式配置角度项目？

我目前拥有的是将脚本插入 angular.json 的提示：

"scripts": [
{
  "bundleName": "environment",
  "inject": true,
  "input": "src/environments/environment.ts"
}]

但是我需要为每个环境配置一个脚本，因为这里不允许使用通配符。也许我应该独立于 ng b 使用 tsc？

【问题讨论】：

标签： angular deployment build

【解决方案1】：

我已经设法根据this article 做到了这一点。

基本思想是不使用 environment.{env}.ts 文件，定义一个在 SPA 中可用的自定义配置文件，而无需合并到 main.js 文件中。

我已按照以下步骤操作：

在srcconfig添加了配置文件。这是 environment.ts 的副本
删除了environment.ts 文件中的所有内容，生产属性除外
定义了一个 TS 接口（例如 AppConfig）来存储当前配置值
定义了一个ConfigService来实际加载配置数据
在应用程序启动时加载配置。一些服务需要显式依赖 ConfigService 才能正常工作：

const appInitializerFn = (configService: ConfigService) => {
  return () => {
    return configService.setConfig();
  };
};

ConfigService,
{
    provide: APP_INITIALIZER,
    useFactory: appInitializerFn,
    multi: true,
deps: [ConfigService]
},

// all services (or similar objects) must explicitly state the dependency on ConfigService because configuration reading is done async and the service might need the values sooner than the Promise is resolved.
{ provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true, deps: [ConfigService]},

一些与应用程序初始化相关的服务将需要进行一些更改（例如 MSAL）

Software Codidact 答案中提供了所有代码。

【讨论】：