在Nx MFE Angular应用中添加NgRx引发静态表达式求值失败

问题根源 #

Angular的AOT编译器要求@NgModule的元数据（比如imports、StoreModule.forRoot的配置参数）必须是静态可求值的表达式。你当前通过new EnvironmentImpl()实例化环境对象的方式属于运行时操作，编译器无法在编译阶段确定environment.production的具体值，因此抛出"无法静态求值"的错误。

解决方案 #

1. 将环境对象改为字面量格式 #

把environment.ts和environment.prod.ts从类实例化改为直接导出字面量对象，让编译器能静态解析属性值：

修改后的environment.ts：

export const environment = {
  production: false
};

修改后的environment.prod.ts：

export const environment = {
  production: true
};

2. 优化NgModule中的条件配置写法 #

针对StoreModule.forRoot的metaReducers和imports中的条件模块导入，调整写法以符合静态求值要求：

修改后的AppModule代码：

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...其他导入模块
    StoreModule.forRoot(
      { product: productStateReducer },
      {
        // 原三元表达式两边返回的都是[]，可直接简化为[]；若后续有实际逻辑，保持三元表达式即可
        metaReducers: [],
        runtimeChecks: {
          strictActionImmutability: true,
          strictStateImmutability: true,
        },
      }
    ),
    EffectsModule.forRoot([]),
    // 使用展开运算符处理条件导入，写法更规范
    ...(!environment.production ? [StoreDevtoolsModule.instrument({ maxAge: 25 })] : []),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 验证修复效果 #

运行Nx的开发或构建命令，比如：

nx serve host
# 或构建生产环境
nx build host --prod

检查原报错是否消失。

补充说明 #

Angular AOT编译的核心是提前将模板和模块元数据编译为JavaScript，因此所有参与模块配置的表达式必须能在编译阶段被解析为固定值。类实例化的对象属性只有在运行时才能确定，不符合AOT的静态求值要求，这就是问题的核心所在。

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