Angular 6升级至12后ng build时NGCC报错，如何定位故障依赖包？

报错原因定位 #

导致你当前NGCC构建报错的直接依赖是 ng2-dnd@^5.0.2。
这个包已经停止维护超过5年，最高仅适配到Angular 6版本，完全没有兼容Angular 12的Ivy编译机制，也没有遵循Angular 9+的模块规范实现，NGCC（Angular兼容性编译器）在处理它的元数据时就会抛出你遇到的Cannot read property 'text' of undefined错误。 #

其他潜在不兼容依赖 #

你项目中还有多个同样未适配Angular 12的依赖，也是后续可能触发报错的风险点：

• @angular/http@~7.0.0：Angular 4版本就已废弃该包，功能已经全部迁移到@angular/common/http，Angular 12已经完全移除了对该包的支持
• ngx-toastr@^9.1.1：v9版本仅适配Angular 7，Angular 12需要使用v14及以上版本的ngx-toastr
• ng-block-ui@^1.0.6：v1版本仅适配Angular 6，Angular 12需要升级到v3及以上版本
• angular2-draggable@^2.1.5：v2版本仅适配Angular 6/7，Angular 12可升级到该包的最新版本，或直接替换为@angular/cdk/drag-drop内置拖拽模块

修复步骤 #

1. 卸载不兼容的ng2-dnd：

npm uninstall ng2-dnd

如果项目仍需要拖拽功能，推荐替换为@angular/cdk内置的DragDropModule，原生兼容Angular 12。
2. 移除@angular/http依赖，将项目中所有导入@angular/http的代码，替换为@angular/common/http的对应实现。
3. 升级其余不兼容依赖到适配Angular 12的对应版本。
4. 清空缓存重新构建：

rimraf node_modules package-lock.json
npm cache clean --force
npm i --legacy-peer-deps
ng build

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