Angular项目中ng-bootstrap组件无法在app.component外正常使用

问题背景 #

Angular 15 + ng-bootstrap 14环境下，仅在app.component.html中能正常使用ngb-accordion等组件，其他自定义组件中使用时触发NG8001错误，提示组件未被识别。已在app.module.ts导入NgbModule，改为独立组件可解决但不想全量切换独立模式。

核心原因 #

Angular的模块具有隔离性，AppModule中导入的模块不会自动被子模块继承。自定义组件所属的Feature Module（比如你创建的BootstrapAccordionModule）必须单独导入所需的ng-bootstrap组件模块，才能在该模块下的组件中使用对应的ng-bootstrap组件。

可行解决方案 #

方案1：在组件所属的Feature Module中导入对应ng-bootstrap模块 #

找到你的自定义AccordionComponent所属的模块（比如BootstrapAccordionModule），在该模块的imports数组中添加需要的ng-bootstrap模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AccordionComponent } from './accordion.component';
// 导入ng-bootstrap的折叠面板模块
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AccordionComponent],
  imports: [
    CommonModule,
    NgbAccordionModule // 添加这一行
  ],
  exports: [AccordionComponent] // 如果需要在其他模块使用该组件，记得导出
})
export class BootstrapAccordionModule { }

如果需要使用多个ng-bootstrap组件，也可以直接导入NgbModule替代单个组件模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// ...
imports: [CommonModule, NgbModule]

方案2：创建SharedModule统一管理ng-bootstrap模块 #

如果多个Feature Module都需要使用ng-bootstrap组件，建议创建一个SharedModule，集中导入并导出ng-bootstrap模块，后续各业务模块只需导入SharedModule即可：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbAccordionModule, NgbAlertModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; // 根据需求添加

@NgModule({
  imports: [
    CommonModule,
    NgbAccordionModule,
    NgbAlertModule,
    NgbDropdownModule
  ],
  exports: [
    CommonModule,
    NgbAccordionModule,
    NgbAlertModule,
    NgbDropdownModule
  ]
})
export class SharedModule { }

然后在你的BootstrapAccordionModule中导入SharedModule：

imports: [SharedModule]

排查你之前尝试的问题 #

你提到创建BootstrapAccordionModule后编译失败，大概率是模块配置错误：

• 确认模块中declarations数组包含了AccordionComponent
• 确认imports数组正确添加了NgbAccordionModule或NgbModule
• 如果该组件需要被其他模块引用，需在exports数组中导出AccordionComponent

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