Angular 5中调用BsModalRef打开模态框时出现NullInjector错误求助

你遇到的NullInjectorError本质是Angular找不到BsModalRef的提供者导致的，这通常和模块导入逻辑、组件库打包配置或者主应用的依赖声明有关。下面是一步步的排查和解决方法：

1. 确认组件库的模块配置正确 #

你的组件库中，使用BsModalRef的组件所在模块，必须导入ngx-bootstrap的ModalModule——这是Angular能识别并提供BsModalRef服务的前提。如果是组件库的根模块，用forRoot()初始化；如果是子模块，用forChild()：

// 组件库中的模块文件（比如your-library.module.ts）
import { NgModule } from '@angular/core';
import { ModalModule } from 'ngx-bootstrap/modal';
import { YourModalTriggerComponent } from './your-modal-trigger.component';
import { YourModalContentComponent } from './your-modal-content.component';

@NgModule({
  declarations: [YourModalTriggerComponent, YourModalContentComponent],
  imports: [
    // 根模块用forRoot()，子模块用forChild()
    ModalModule.forRoot()
  ],
  exports: [YourModalTriggerComponent]
})
export class YourLibraryModule { }

2. 检查主应用AppModule的导入逻辑 #

主应用必须确保ngx-bootstrap的ModalModule被正确导入，或者直接导入你的组件库模块（如果组件库模块已经包含了ModalModule的导入）：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModalModule } from 'ngx-bootstrap/modal';
import { YourLibraryModule } from 'your-published-npm-package';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 二选一：要么直接导入ModalModule，要么导入你的组件库模块（如果组件库已导出ModalModule）
    ModalModule.forRoot(),
    YourLibraryModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确保ng-packagr的外部依赖配置无误 #

组件库打包时，必须把ngx-bootstrap标记为外部依赖，避免把它打包进组件库，而是让主应用提供这个依赖。检查你的ng-package.json：

// ng-package.json
{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "ngx-bootstrap": "ngx-bootstrap"
    }
  },
  "whitelistedNonPeerDependencies": ["ngx-bootstrap"]
}

同时，组件库的package.json要把ngx-bootstrap添加到peerDependencies，这样主应用安装时会自动提示安装匹配版本的依赖：

// 组件库的package.json
{
  "name": "your-component-library",
  "version": "1.0.0",
  "peerDependencies": {
    "@angular/core": "^14.0.0", // 匹配你的Angular版本
    "@angular/common": "^14.0.0",
    "ngx-bootstrap": "^11.0.0" // 匹配Angular版本的ngx-bootstrap版本
  }
}

4. 验证SystemJS配置（如果主应用使用SystemJS） #

如果主应用用SystemJS加载模块，要确保ngx-bootstrap和你的组件库在system.config.js中有正确的映射：

// system.config.js
System.config({
  map: {
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    // 其他Angular依赖映射...
    'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
    'your-component-library': 'npm:your-component-library/bundles/your-component-library.umd.js'
  },
  packages: {
    // 其他包配置...
  }
});

最后验证步骤 #

1. 主应用中安装ngx-bootstrap：npm install ngx-bootstrap bootstrap（bootstrap样式可选，但如果模态框需要样式渲染的话建议安装）
2. 重新打包组件库：ng build your-library --prod，然后发布到npm（或者本地测试用npm link）
3. 主应用重新安装依赖，重启开发服务器，测试模态框是否正常触发

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