升级Angular5与ng-bootstrap至1.0.0-beta.9后ngbModal.open()失效

这种情况我在升级Angular和配套ng-bootstrap库时也遇到过，虽然控制台没报错，但模态框不显示还冻结页面，大概率是版本兼容、模板引用或者样式加载的问题，给你几个实用的排查和解决方向：

• 确认ng-bootstrap与Angular 5的版本兼容性
  Angular 5对应的ng-bootstrap稳定版本是1.x系列，如果你装了更高版本（比如2.x+）就会出现这类隐性问题。可以先执行npm list @ng-bootstrap/ng-bootstrap查看当前版本，如果不匹配，重新安装对应版本：

  npm install @ng-bootstrap/ng-bootstrap@1.0.0 --save
  

• 检查模态框的调用逻辑与模板引用
  升级后ng-bootstrap的模态框API有细微调整，要确保你的调用方式正确：
  组件内的服务注入与调用代码：

  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  
  constructor(private modalService: NgbModal) {}
  
  openModal(content: any) {
    // 确保传入的是ng-template的引用对象
    this.modalService.open(content);
  }
  

  模板中的ng-template要正确设置引用变量：

  <button (click)="openModal(content)">打开模态框</button>
  <ng-template #content>
    <div class="modal-header">
      <h4 class="modal-title">测试模态框</h4>
    </div>
    <div class="modal-body">
      这是模态框内容
    </div>
  </ng-template>
  

  重点确认有没有把模板引用正确传递给open方法，避免传错值导致模态框无法初始化。

• 验证Bootstrap全局样式是否正确加载
  ng-bootstrap依赖Bootstrap的CSS文件，如果升级后样式没有正确引入，模态框可能被隐藏在页面底层（比如z-index问题），进而触发页面冻结。可以检查angular.json的styles数组，或者在全局样式文件中添加：

  @import "~bootstrap/dist/css/bootstrap.min.css";
  

• 排查模态框内容的代码问题
  先把模态框内容简化成最基础的文本（比如上面的测试内容），如果能正常打开，说明问题出在你原来的模态框内容里——比如有没有写无限循环、同步阻塞的HTTP请求，或者组件初始化逻辑里的死循环？逐步恢复内容，就能定位到具体的问题代码。

• 启用Angular调试工具排查组件状态
  在main.ts中启用调试模式，帮助你查看模态框组件是否被正确创建：

  import { enableDebugTools } from '@angular/platform-browser';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(appRef => {
      enableDebugTools(appRef);
    })
    .catch(err => console.error(err));
  

  之后在浏览器控制台输入ng.profiler.timeChangeDetection()，或者查看组件树，确认模态框组件的状态是否正常。

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