使用generator-ngx-library构建组件库时遇ModalModule注入错误求助

嘿，我看你遇到了这个让人头疼的注入错误，其实这是Angular库开发里挺常见的小坑，我来帮你捋捋问题出在哪以及怎么解决！

问题根源 #

你已经在LibModule里导入了ModalModule.forRoot()，但问题很可能出在Demo项目的AppModule没有正确初始化你的LibModule。Angular里第三方模块的forRoot()方法是用来注册单例服务的（比如BsModalService），如果你的根模块（Demo的AppModule）只是普通导入LibModule，而没有调用LibModule.forRoot()，那这些依赖的服务就不会被注册到全局注入器里，自然就找不到BsModalService啦。

两步解决法 #

第一步：修改Demo的AppModule，用forRoot()导入LibModule

打开Demo项目里的AppModule，把原来的LibModule改成LibModule.forRoot()：

@NgModule({
  imports: [
    BrowserModule,
    LibModule.forRoot() // 关键：这里必须调用forRoot()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：（可选但更规范）完善LibModule的forRoot()方法

虽然你现在在LibModule的imports里加了ModalModule.forRoot()也能工作，但更规范的做法是把第三方模块的服务提供者集成到自己的forRoot()里，避免重复注册服务。修改你的LibModule代码：

@NgModule({
 imports: [
  CommonModule,
  FormsModule,
  ModalModule, // 这里去掉.forRoot()
  ReactiveFormsModule,
  ButtonsModule // 同样去掉.forRoot()
 ],
 exports: [LibComponent],
 declarations: [LibComponent]
})
export class LibModule {
 static forRoot(): ModuleWithProviders<LibModule> {
  return {
   ngModule: LibModule,
   providers: [
    LibService,
    // 把第三方模块的服务提供者合并进来
    ...ModalModule.forRoot().providers!,
    ...ButtonsModule.forRoot().providers!
   ]
  };
 }
}

这样做的好处是，任何使用你这个库的项目，只需要调用一次LibModule.forRoot()，就能一次性获取所有依赖的服务，不用再单独处理ngx-bootstrap的模块配置。

最后验证 #

• 重新执行gulp build编译你的组件库
• 重启Demo项目，看看错误是不是消失了

这个问题本质上就是Angular单例服务的注册时机问题，只要确保根模块通过forRoot()初始化你的库，依赖的服务就能被正确注入啦！

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