Angular 环境文件没有及时交换答案

【问题标题】：Angular environment files do not get swapped in timeAngular 环境文件没有及时交换
【发布时间】：2020-12-03 16:14:22
【问题描述】：

我正在使用 Angular 9，视图引擎编译器。

我有 2 个文件用于存储环境值：

environment.ts：

export const environment: any = {
    production: false,
};

environment.prod.ts：

export const environment: any = {
    production: true
}

这是我的 angular.json 配置的一部分，它在为生产环境构建应用程序时将 environment.ts 与 environment.prod.ts 交换：

"configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "app/src/environments/environment.ts",
          "with": "app/src/environments/environment.prod.ts"
        }
      ]
    }
  }

我正在使用环境变量来配置第三方服务是否应该在开发者模式下运行。但是，在生产中（使用 --prod 标志构建时），它无法正常工作。经过一番调查，我们发现第三方服务是从 environment.ts 而不是从 environment.prod.ts 获取价值。

这是 app.module.ts 的精简版，其中进行了配置：

import { environment } from './../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Google Analytics (via Angulartics2)
    Angulartics2Module.forRoot({
      developerMode: !environment.production // <-- Gets incorrect value: 'true' on production mode
    }),                                      // but should be 'false'
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    console.log(!environment.production); // <-- Logs correct value: 'false' on production mode
  }
}

稍后在运行时测试 Angulartics2 第三方服务确实收到了错误的值：

@Injectable({ providedIn: 'root' })
export class GoogleAnalyticsService {
  constructor(
    private angulartics2: Angulartics2
  ) {
    console.log(this.angulartics2.settings.developerMode); // Logs 'true'
  }
}

为什么在AppModule 的@NgModule 装饰器函数中接收到了错误的环境值，然后 - 在AppModule 的constructor 和稍后在运行时执行的服务中得到了正确的环境值？ AppModule 的 @NgModule() 装饰器函数是否在编译器交换环境文件之前执行？

【问题讨论】：

请发布您的 tsconfig.json。因为“@env/environment”的来源不明。
我已经用相对路径更新了代码
应该是import { environment } from './../environments/environment'。问题是否仍然存在？
是的，.prod 部分被编译器删除了，我再次更新了代码，对此感到抱歉。无论如何，我可以向您保证，问题不在于进口
好吧，当某些东西被错过导入时，问题就出在导入上。但可能不是直接在你的情况下。不过，您的代码似乎是正确的。

标签： angular environment-variables ng-modules angular-compiler angulartics2

【解决方案1】：

对于 Angular.json 中指定的文件替换，似乎 Angular uses Webpack。所以文件替换发生在构建阶段的某个时刻，这可能是在装饰器中的代码（如@NgModule）被 Angular 编译器解析之后。因此，在配置@NgModule 导入时似乎不应该使用环境变量。

【讨论】：