跨项目导入含ng-bootstrap的导航模块遇NgbDropdownConfig注入错误

我来帮你分析这个问题：你遇到的NullInjectorError: No provider for NgbDropdownConfig!本质是Angular无法定位到NgbDropdownConfig服务的提供者，结合你的代码来看，问题出在共享模块MainNavbarModule和宿主模块AppModule的配置冲突上，下面是具体原因和解决办法：

错误原因分析 #

1. NgbModule重复导入导致注入器冲突
   你的MainNavbarModule同时导入并导出了NgbModule，而App2的AppModule又导入了NgbModule.forRoot()——NgbModule.forRoot()会提供全局配置服务（比如NgbDropdownConfig），普通NgbModule仅导出组件指令。这种重复导入会导致模块注入器层级混乱，使得MainNavbarModule内的组件无法获取根模块提供的配置服务。

2. 模块级自定义NgZone干扰核心依赖链
   MainNavbarModule在模块级别自定义了NgZone实例，而ng-bootstrap的组件和配置服务依赖Angular原生的NgZone服务，自定义的NgZone会破坏默认的依赖注入链路，间接导致配置服务无法被找到。

解决方案 #

方案一：调整NgbModule的导入/导出策略（优先推荐） #

修改MainNavbarModule，仅导入NgbModule用于内部组件使用，不再导出它——因为App2的根模块已经通过NgbModule.forRoot()提供了全局的ng-bootstrap支持：

import {NgModule, NgZone} from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavigationComponent} from "./components/navigation/navigation.component";
import {NavMenuComponent} from "./components/nav-menu/nav-menu.component";
import {MainMenuComponent} from "./components/main-menu/main-menu.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
 imports: [
  CommonModule,
  NgbModule // 仅内部使用，无需导出
 ],
 declarations: [
  NavigationComponent,
  NavMenuComponent,
  MainMenuComponent
 ],
 exports: [
  NavigationComponent,
  NavMenuComponent,
  MainMenuComponent,
  CommonModule
  // 移除NgbModule的导出
 ],
 // 先暂时移除自定义NgZone，验证错误是否解决
 // providers: [{ provide: NgZone, useFactory: () => new NgZone({}) }]
})
export class MainNavbarModule { }

方案二：保留自定义NgZone但缩小作用域 #

如果你确实需要自定义NgZone，建议将其作用域限定在组件级别，而不是模块级别，避免影响全局服务：

// 以NavigationComponent为例，在组件内部添加提供者
@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  providers: [{ provide: NgZone, useFactory: () => new NgZone({}) }]
})
export class NavigationComponent {
  // 组件逻辑...
}

同时保持MainNavbarModule仅导入NgbModule，App2的AppModule保留NgbModule.forRoot()的导入。

方案三：调整模块导入顺序 #

确保NgbModule.forRoot()在MainNavbarModule之前导入，让全局配置服务先被初始化：

@NgModule({
 declarations: [AppComponent],
 imports: [
  BrowserModule,
  NgbModule.forRoot(), // 全局配置模块优先导入
  CommonModule,
  AppRoutes,
  MainNavbarModule // 共享模块后导入
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

验证步骤 #

修改完成后，执行以下步骤确保生效：

1. 清理Angular缓存：运行ng clean
2. 重新构建并启动App2：ng serve

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