Angular+Storybook组件嵌套问题：按钮组件无法在卡片中渲染

核心原因分析 #

你遇到的ButtonComponent无法在CardComponent中渲染的问题，大概率是以下几种常见Angular模块配置错误导致：

• ComponentsModule未导入CommonModule
  Angular根模块（AppModule）导入的BrowserModule包含基础渲染所需的CommonModule，但特性模块必须单独导入CommonModule，它提供了组件模板解析所需的内置指令（如*ngIf、*ngFor）和基础渲染能力，缺失会导致组件无法正常渲染。

• 组件声明或导出配置错误
  若ButtonComponent未被正确添加到ComponentsModule的declarations数组，或者需要被外部模块使用时未在exports数组中导出，都会导致组件无法被识别。

• 选择器不匹配
  若button.component.ts中定义的selector（如app-button）与card.component.html中使用的标签（如<app-button>）大小写、拼写不一致，也会导致组件无法渲染。

具体修复步骤 #

1. 给ComponentsModule添加CommonModule导入
   修改components.module.ts，在imports数组中加入CommonModule：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { ButtonComponent } from './button/button.component';
   import { CardComponent } from './card/card.component';
   
   @NgModule({
     declarations: [ButtonComponent, CardComponent],
     imports: [CommonModule], // 必须添加这一行
     exports: [ButtonComponent, CardComponent] // 若其他模块需要使用这两个组件，需导出
   })
   export class ComponentsModule { }
   

2. 校验组件声明与选择器

   • 确认ButtonComponent和CardComponent都在ComponentsModule的declarations数组中，且文件路径正确。
   • 核对button.component.ts的selector属性与card.component.html中使用的标签完全一致（注意Angular选择器区分大小写）。

3. 避免重复声明组件
   检查AppModule的declarations数组，确保ButtonComponent和CardComponent没有被重复声明（Angular禁止同一个组件被多个模块声明）。

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