Angular16中如何在NgModule装饰器内使用isDevMode()？

错误原因 #

Angular的AOT编译器要求NgModule的imports数组内容必须能静态分析确定，而isDevMode()是运行时计算的函数，编译器无法在编译阶段判断其返回值，因此抛出"无法静态确定值"的错误。

解决方案 #

方案1：使用Angular环境变量（推荐） #

Angular CLI默认生成的environment.ts和environment.prod.ts中包含静态的production常量，可直接用于判断环境：

1. 导入环境文件：

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

2. 修改imports数组中的代码：

imports: [
  BrowserModule,
  StoreModule.forRoot(reducers, { metaReducers }),
  !environment.production ? StoreDevtoolsModule.instrument() : [],
]

方案2：利用StoreDevtoolsModule的enabled配置 #

StoreDevtoolsModule.instrument()支持传入配置对象，通过enabled参数在运行时判断是否启用工具，这样模块本身始终被静态导入，避免编译错误：

imports: [
  BrowserModule,
  StoreModule.forRoot(reducers, { metaReducers }),
  StoreDevtoolsModule.instrument({
    enabled: isDevMode()
  }),
]

方案3：自定义静态环境判断常量 #

如果不想依赖Angular的环境文件，可以自定义一个编译时可确定的常量：

// 在app.module.ts顶部定义
const IS_DEV_MODE = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    IS_DEV_MODE ? StoreDevtoolsModule.instrument() : [],
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注：Angular CLI会在编译时自动替换process.env.NODE_ENV为对应环境的值，确保常量是静态可分析的。

内容的提问来源于stack exchange，提问作者Ali