将Ng Bootstrap Accordion迁移至SharedModule后UI无渲染问题求助

以下是针对该问题的排查与解决步骤：

1. 确保SharedModule配置正确 #

SharedModule必须完成Ng Bootstrap模块导入、自定义组件声明、自定义组件导出三个关键操作，否则功能模块无法正常使用这些组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入Ng Bootstrap的Accordion核心模块
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
// 导入自定义封装的组件
import { SbAccordionComponent } from './sb-accordion.component';
import { SbAccordionPanelComponent } from './sb-accordion-panel.component';

@NgModule({
  declarations: [
    SbAccordionComponent,
    SbAccordionPanelComponent
  ],
  imports: [
    CommonModule,
    NgbAccordionModule // 必须导入此模块才能识别ngb-accordion/ngb-panel标签
  ],
  exports: [
    SbAccordionComponent,
    SbAccordionPanelComponent // 导出后其他功能模块才能引用
  ]
})
export class SharedModule { }

2. 检查功能模块的SharedModule导入 #

使用自定义折叠面板的功能模块，必须显式导入SharedModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule // 导入后才能在模块内使用lib-sb-accordion等组件
  ],
  // 组件声明、路由配置等...
})
export class FeatureModule { }

3. 验证Bootstrap样式加载状态 #

Ng Bootstrap依赖Bootstrap原生CSS，确保样式已正确引入：

• 方式1：在angular.json的styles数组中添加：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ]
  

• 方式2：在src/styles.css中导入：

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

4. 核对自定义组件选择器 #

确认组件类的selector属性与模板中使用的标签完全匹配：
比如SbAccordionComponent的selector需为lib-sb-accordion，SbAccordionPanelComponent的selector需为lib-sb-accordion-panel，与你模板中的标签一致。

5. 查看控制台错误提示 #

打开浏览器开发者工具的Console面板，排查是否存在以下典型错误：

• Component is not part of any NgModule：说明自定义组件未在SharedModule中声明
• Can't bind to 'xxx' since it isn't a known property of 'ngb-accordion'：说明未导入NgbAccordionModule
• 样式加载失败报错：说明Bootstrap CSS未正确引入

6. 配置面板默认展开状态（可选） #

默认情况下ngb-accordion的面板处于折叠状态，可通过activeIds指定默认展开的面板，避免因折叠导致视觉上无内容：
修改lib-sb-accordion模板：

<ngb-accordion #acc="ngbAccordion" activeIds="default-panel">
  <ng-content></ng-content>
</ngb-accordion>

修改lib-sb-accordion-panel模板：

<ngb-panel id="default-panel" title="Simple">
  <ng-template ngbPanelContent>
    <ng-content></ng-content>
  </ng-template>
</ngb-panel>

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