Angular 11中使用FlexLayoutModule报NG6002错误，求问题原因及解决方法

首先咱们直接点出问题核心：你使用的11.0.0-beta.33版本的@angular/flex-layout是测试版本，它对Angular Ivy编译器的兼容存在已知缺陷，导致ngcc（Angular的兼容编译器）无法正确处理该模块的声明，所以Angular识别不出FlexLayoutModule是合法的NgModule，最终抛出了NG6002错误。

下面给你几个按优先级排序的解决方案：

1. 升级到正式稳定版（最推荐） #

Angular Flex-Layout的11.x正式稳定版是11.0.0（去掉了beta后缀），这个版本已经完全修复了Ivy兼容问题。执行以下命令完成升级：

npm install @angular/flex-layout@11.0.0 --save

升级完成后，记得重启开发服务器，必要时可以清理npm缓存（npm cache clean --force），然后重新构建项目，这个操作大概率能直接解决问题。

2. 临时禁用Ivy（应急方案） #

如果因为某些原因暂时无法升级，可以临时在tsconfig.json里关闭Ivy编译器：

{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

不过要注意，禁用Ivy会让你失去Angular 9+带来的性能优化和新特性，这只是权宜之计，还是建议尽快升级到稳定版。

3. 彻底清理依赖与ngcc缓存 #

如果升级后问题依然存在，试试彻底重置依赖环境：

• 删除项目根目录下的node_modules文件夹和package-lock.json（用yarn的话是yarn.lock）
• 重新执行npm install安装所有依赖
• 手动触发ngcc处理所有依赖：

  npx ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points
  

额外提醒 #

@angular/flex-layout从版本10开始就已经全面支持Ivy了，但beta版本本身就是用来测试的，存在未修复的bug很正常，生产环境一定要使用正式发布的稳定版，避免这类模块解析的坑。

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