0

我正在使用 Angular 9，查看引擎编译器。

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

环境.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's 的@NgModule装饰器函数中接收到错误的环境值，但是 - 在AppModule's中的正确环境值constructor和稍后在运行时执行的服务？是否在编译器交换环境文件之前执行@NgModule()装饰器函数？AppModule

4

1 回答 1

0

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

于 2021-01-07T18:18:37.900 回答