Angular项目从8升级到12时@ng-bootstrap/ng-bootstrap编译报错求解

报错原因 #

你遇到的所有报错核心来自两个问题：

1. 当前安装的@ng-bootstrap/ng-bootstrap版本过旧，其中同时使用@Input和查询装饰器的写法在Angular 9+之后不再被支持，触发NG1006错误，连带后续的组件、模块注解识别错误（NG6001/NG6002/NG6003）。
2. Angular相关依赖版本完全混乱：Angular CLI是12.2.1，核心包却升到了13.0.0预览版，同时还残留了Angular 9版本的@angular-devkit相关包，跨版本混用直接导致编译规则不统一。

解决步骤 #

• 先卸载现有不兼容的ng-bootstrap包：

npm uninstall @ng-bootstrap/ng-bootstrap

• 统一所有Angular相关依赖到12.2.x稳定版，修正版本混用问题：

npm install @angular/core@12.2.1 @angular/animations@12.2.1 @angular/common@12.2.1 @angular/compiler@12.2.1 @angular/forms@12.2.1 @angular/platform-browser@12.2.1 @angular/platform-browser-dynamic@12.2.1 @angular-devkit/build-angular@12.2.1 @angular-devkit/architect@12.2.1 @angular-devkit/core@12.2.1 --force

• 安装和Angular 12匹配的ng-bootstrap 10.x版本：

npm install @ng-bootstrap/ng-bootstrap@10.0.0 --force

• 清理缓存重新安装所有依赖：
  删除项目根目录下的node_modules文件夹、package-lock.json文件后执行：

npm cache clean --force
npm install

• 重新执行ng serve或ng build即可正常编译。

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