Angular Storybook中Angular Icons组件无法渲染的问题排查

核心问题原因 #

Storybook渲染Angular组件时，不会自动继承AppModule中的依赖配置。你在AppModule里导入了NgIconsModule，但Storybook单独加载CardComponent时，没有包含这个模块，所以会报'ng-icon' is not a known element错误。

方法一：在单个Story中导入NgIconsModule #

修改card.component.stories.ts，在组件模板配置中添加imports数组，注册所需的图标模块：

import { Story, Meta } from '@storybook/angular/types-6-0';
import { CardComponent } from "./card.component";
// 导入NgIcons核心模块和需要的图标
import { NgIconsModule } from "@ng-icons/core";
import { bootstrapCalendar3, bootstrapActivity, bootstrapStar } from "@ng-icons/bootstrap-icons";

export default {
  title: "CardComponent",
  component: CardComponent,
  argTypes: {
    selected: { control: "boolean" },
    title: { control: "text" },
    date: { control: "text" },
    status: { control: "text" },
    claimer: { control: "text" },
  },
} as Meta;

const Template: Story<CardComponent> = (args: CardComponent) => ({
  props: args,
  // 在这里添加导入配置
  imports: [
    NgIconsModule.withIcons({ bootstrapCalendar3, bootstrapActivity, bootstrapStar })
  ],
});

export const Selected = Template.bind({});

Selected.args = {
  selected: true
};

方法二：全局配置（适用于多组件使用图标的场景） #

如果你的多个Story都需要用到Angular Icons，可以在Storybook的全局配置中统一导入，避免重复代码：

1. 打开.storybook/preview.js（如果没有则创建）
2. 添加以下代码：

import { moduleMetadata } from '@storybook/angular';
import { NgIconsModule } from "@ng-icons/core";
import { bootstrapCalendar3, bootstrapActivity, bootstrapStar } from "@ng-icons/bootstrap-icons";

// 全局装饰器，为所有Story注入所需模块
export const decorators = [
  moduleMetadata({
    imports: [
      NgIconsModule.withIcons({ bootstrapCalendar3, bootstrapActivity, bootstrapStar })
    ],
  }),
];

关于独立组件的问题说明 #

你将组件改为独立组件后图标能显示，是因为独立组件会直接声明自身依赖的模块，Storybook能识别这些依赖。但全局主题失效，是因为独立组件默认不会继承AppModule中的全局样式、主题模块等配置。如果要继续用独立组件，需要在组件的imports数组中手动导入主题相关的模块或样式文件。

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