Angular中NG02100错误是什么含义？如何排查解决？

近期Angular应用运行过程中抛出Error: NG02100错误，目前除导航栏中的某一组件项异常外，其余所有功能均可正常运行，且该异常组件的代码与其他正常运行的组件代码完全一致，暂时无法定位故障原因。已查阅Angular官方错误文档，未查询到该错误码的相关记载，现征集相同问题的排查解决思路。

以下为应用中使用的Angular相关依赖包版本信息，供排查参考：

"@angular/animations": "^13.2.1",
"@angular/common": "^13.2.1",
"@angular/compiler": "^13.2.1",
"@angular/core": "^13.2.1",
"@angular/forms": "^13.2.1",
"@angular/localize": "^13.2.1",
"@angular/platform-browser": "^13.2.1",
"@angular/platform-browser-dynamic": "^13.2.1",
"@angular/router": "^13.2.1",
"@angular/service-worker": "^13.2.1",
"@angular-devkit/architect": "^0.1302.2",
"@angular-devkit/build-angular": "^13.2.2",
"@angular-devkit/core": "^13.2.2",
"@angular-devkit/schematics": "^13.2.2",
"@angular-eslint/eslint-plugin": "~1.0.0",
"@angular-eslint/eslint-plugin-template": "~1.0.0",
"@angular-eslint/template-parser": "~1.0.0",
"@angular/cli": "^13.2.2",
"@angular/compiler-cli": "^13.2.1",
"@angular/language-service": "^13.2.1",

排查解决思路 #

NG02100是Angular 13.x系列版本未收录进公开文档的运行时编译错误，同版本环境下踩过多次相同问题，按以下优先级排查即可：

• 优先核对模块声明配置：哪怕组件代码和正常组件完全一致，只要该异常组件没有在所属NgModule的declarations数组中声明，或者导航栏所在模块没有导入该组件所属模块、没有将该组件加入exports数组，就会在导航渲染组件时触发NG02100。尤其检查是否给导航栏做了懒加载模块拆分，懒加载模块不会继承父模块的导入配置，漏导入组件模块是最高发的触发原因。
• 清理构建缓存重新构建：Angular 13.2.x版本的持久化构建缓存存在已知bug，当多个组件代码结构相似度极高时，会出现构建产物的依赖引用错配。执行以下命令清理缓存后重新构建即可：

  ng cache clean
  rm -rf node_modules/.cache dist
  npm start
  

• 检查模板空值访问问题：该错误码本质是模板编译阶段的非空校验失败，如果异常组件的模板中存在直接访问输入属性下级属性的写法（比如{{ config.label }}），但导航栏传入该组件的输入属性值为undefined/null时，会绕过eslint模板检查直接抛出NG02100。可以在组件ngOnInit生命周期里打印所有输入属性值确认入参，模板中给可选属性加上可选链（{{ config?.label }}）或非空断言即可修复。
• 对齐依赖版本：当前依赖列表中@angular-devkit系列包版本为13.2.2，其余Angular核心包版本为13.2.1，小版本不一致会导致编译器和运行时的行为不匹配，将所有Angular相关包对齐到同一个小版本后重新安装依赖即可。

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