Angular：app.module.ts 中的奇怪 if 语句行为

Question

我们最近在 app.module.ts 中遇到了奇怪的行为。我们使用 environment.ts 和 environemnt.prod.ts 文件在模块的导入数组中包含/排除特定库（库应该被排除在生产构建中）。它看起来像这样：

import { environment } from '../environments/environment'
//
@NgModule({
//
  imports: [
    CommonModule,
    BrowserModule,
    environment.production ? [] : libraryXXX,
    HttpClientModule,
    FormsModule
  ],

经过几天的调查后，我们发现 libraryXXX 每次都包含在构建中，即使带有 --prod 标志也是如此。我们测试了问题所在 - environment.ts/prod.ts 文件中的值被正确读取，但无论出于何种原因，比较总是返回 false。我的意思总是：将上面的片段替换为：

environment.production == true ? [] : libraryXXX

或

environment.production == false ? [] : libraryXXX

没有改变任何事情 - 图书馆总是包括在内。就像 if 语句被破坏了（？）。将其提取到变量并没有改变任何事情。我们最终做了半hacky的解决方案，比如：

环境.ts

import { libraryXXX } from 'whatever'

export const environment = {
  production: false,
  libraryXXX: libraryXXX
}

环境.prod.ts

export const environment = {
  production: true,
  libraryXXX: []
}

并简单地引用 app.module.ts 中的 environment.libraryXXX。但出于好奇 - 谁能向我解释为什么简单的 if 语句失败了？由于它是 app.module.ts 我无法调试它，甚至无法查看控制台输出，以了解发生了什么。有人有想法吗？

Answer 1

这会起作用。

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

const targetModules = [
    CommonModule,
    BrowserModule,
    HttpClientModule,
    FormsModule
];

if (environment.production) {
   targetModules.push(libraryXXX);
}

//
@NgModule({
//
  imports: targetModules,
//

Answer 2

你可以做什么：

您可以导入 prod 和 mock 版本这两个库。

然后你可以决定（environment.production）你将提供哪一个：

providers: [
   {
      provide: DbTrassenanfrageStatusService,
      useClass: environment.production ? XyzMockService : XyzService
   }
]

如果您在谈论模块： 试试这个：

const exports = [];
if (environment.production === true) {
  exports.push(ModuleXyyyz);
  console.info('FactoryModule: ModuleXyyyz;');
} else {
  console.info('FactoryModule: nothing;');
}

@NgModule({
  imports: [
    ModuleXyyyz
  ],
  exports
})
export class FactoryModule {
}

然后在您的应用模块中导入 FactoryModule。

要“选择” environment.prod.ts 配置，只需通过 --prod 标志构建或启动它：

ng serve --prod
ng build --prod

请参阅angular cli doc 了解更多信息（--prod、--configuration，...）

如果你有这样的环境。*.ts：

export const environment = {
    production: true,
    env: 'prod',
    version: '{BUILD_VERSION}',
    commitHash: '{COMMIT_HASH}',
    showVersionIndicator: false,
    routerTracing: false,

...然后您可以在启动时（在您的应用组件中）打印出版本之类的字段：

console.info('Version: ', environment.version);