Angular 环境文件没有及时交换

Question

我正在使用Angular9，View Engine编译器。

我有 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[=46= 获取值].

这里是 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() 修饰函数是否在编译器交换环境文件之前执行？

Answer 1

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

Angular 环境文件没有及时交换

Angular environment files do not get swapped in time

environment-variables

ng-modules

angulartics2

angular

angular-compiler