Angular组件跨模块引用报错NG3004：未知元素问题排查

针对你遇到的问题，以下是几个排查和解决方向：

1. 检查Storybook的Story配置 #

Storybook不会自动继承Angular模块的依赖配置，需要在对应组件的Story文件中显式声明模块元数据：

// current.component.stories.ts
import { Meta, Story } from '@storybook/angular';
import { CurrentComponent } from './current.component';
import { CurrentModule } from './current.module';

export default {
  title: 'CurrentComponent',
  component: CurrentComponent,
  moduleMetadata: {
    imports: [CurrentModule] // 导入包含依赖的CurrentModule，或者直接导入OtherModule+CommonModule
  }
} as Meta;

const Template: Story<CurrentComponent> = (args) => ({
  component: CurrentComponent,
  props: args,
});

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

如果Story中没有配置moduleMetadata，Storybook无法识别CurrentComponent依赖的OtherComponent，就会触发NG3004错误。

2. 验证OtherComponent的Selector拼写 #

确认OtherComponent的@Component装饰器里的selector与模板中的标签完全一致：

// other.component.ts
@Component({
  selector: 'other-component', // 必须和模板里的<other-component>完全匹配
  templateUrl: './other.component.html'
})
export class OtherComponent { }

如果selector拼写错误（比如少了连字符、大小写错误），Angular会无法匹配到组件。

3. 检查模块导入路径是否正确 #

确认CurrentModule中导入OtherModule的路径没有错误：

// current.module.ts
// 确保路径是正确的相对路径或绝对路径
import { OtherModule } from '../other/other.module';

路径错误会导致OtherModule实际上没有被导入，Angular无法识别导出的OtherComponent。

4. 清理缓存并重启服务 #

缓存问题也可能导致依赖识别异常：

• 运行ng cache clean清除Angular缓存
• 停止Storybook服务，删除node_modules/.cache/storybook目录后重新启动服务

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