使用NgRx Effects时执行ng build --prod命令失败求助

你遇到的是Angular生产模式（--prod）下AOT编译与NgRx Effects不兼容的典型问题，错误提示里的[?null?]说明NgModule的依赖注入提供者出现了无效值。下面是几个针对性的解决思路：

• 检查NgRx Effects版本兼容性
  Angular 5对应的NgRx稳定版本是4.x系列，如果你的项目安装了NgRx 5及以上版本，会直接和Angular 5的AOT编译逻辑冲突。打开package.json查看@ngrx/effects的版本号，若为5.x或更高，执行降级命令：

  npm install @ngrx/effects@4.1.1 --save
  

  这个版本是经过验证适配Angular 5的稳定版本。

• 排查EffectsModule的配置错误
  错误指向NgRx Effects的内部模块，大概率是你导入EffectsModule时传入了无效内容：

  • 确认EffectsModule.forRoot()或EffectsModule.forFeature()的参数是有效的Effects类数组，不要包含null、undefined或者非Type类型的对象；
  • 正确配置示例：

    import { EffectsModule } from '@ngrx/effects';
    import { UserEffects } from './user.effects';
    
    @NgModule({
      imports: [
        EffectsModule.forRoot([UserEffects])
      ]
    })
    export class AppModule { }
    

  检查代码里有没有类似EffectsModule.forRoot([null])这种低级错误。

• 清理依赖缓存并重装
  依赖缓存可能导致版本不匹配的隐性问题，执行以下步骤重置依赖：

  1. 删除项目根目录下的node_modules文件夹和package-lock.json文件；
  2. 清理npm缓存：

     npm cache clean --force
     

  3. 重新安装依赖：

     npm install
     

  之后再尝试ng build --prod或ng serve --prod。

• 验证AOT编译配置
  打开Angular 5的.angular-cli.json文件，确认defaults.build.aot没有被手动设为false（虽然--prod默认会开启AOT，但手动配置错误也可能引发问题）：

  "defaults": {
    "build": {
      "aot": true
    }
  }
  

按照上述步骤逐一排查，应该能解决这个生产构建报错的问题。

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