Angular 12集成ngx-bootstrap构建报错：BsModalService与Ivy兼容性问题解决方案咨询

我之前在Angular 12项目里折腾ngx-bootstrap时也碰到过一模一样的报错，给你梳理几个可行的解决方案，以及你关心的几个问题：

首选解决方案：更新ngx-bootstrap到兼容版本 #

这个报错核心原因是你当前用的ngx-bootstrap版本没有适配Angular 12默认的Ivy编译器。Angular 12对应的ngx-bootstrap最低兼容版本是7.x，直接更新到对应版本就能解决大部分问题：

• 执行更新命令：

  npm install ngx-bootstrap@7.1.0 --save
  

  或者直接装最新的兼容稳定版：

  npm install ngx-bootstrap@latest --save
  

更新完成后重新运行ng build，大概率能解决报错。

备选方案：强制ngcc处理依赖库 #

如果更新后还是报错，可能是Angular的ngcc工具没有自动处理ngx-bootstrap的Ivy适配，手动触发一次即可：

• 在项目根目录执行：

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

  这个命令会强制生成所有依赖库的Ivy兼容入口文件，执行完毕后再尝试构建。

关于你关心的两个问题 #

1. 是否是Ivy的问题？ #

不完全是。Angular 12把Ivy设为默认编译器后，旧版本的ngx-bootstrap没有按照Ivy的编译规则做适配，才导致了这个报错。本质是依赖库版本与Angular版本不兼容，而非Ivy本身存在bug。

2. 能否在Angular 12中禁用Ivy？ #

可以，但非常不推荐——Angular 12之后官方已经逐步停止对旧View Engine的支持，后续版本会彻底移除相关功能，禁用Ivy会给未来的版本升级埋下大坑。如果实在要临时禁用，按以下步骤操作：

1. 修改tsconfig.json，在angularCompilerOptions中添加：

   "angularCompilerOptions": {
     "enableIvy": false
   }
   

2. 修改angular.json，将构建配置中的aot设为false（Ivy与AOT绑定，禁用Ivy后无法使用AOT编译）：

   "architect": {
     "build": {
       "options": {
         "aot": false
       }
     }
   }
   

再次提醒：这只是临时救急的办法，优先还是更新兼容的ngx-bootstrap版本更稳妥。

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