Angular可复用组件跨核心/特性模块使用的归属及报错问题咨询

你的核心误解在于对Angular模块职责的混淆，SharedModule恰恰就是用来存放这种跨模块复用组件的最佳选择，不管核心模块是否使用它。

为什么你的尝试失败了？ #

把组件放在AppModule里是错误的做法：Angular的模块是隔离的，特性模块（比如你的TutorModule）不会自动继承AppModule中声明的组件，哪怕你在AppModule里导出了SvgComponent，特性模块也无法直接使用——除非特性模块显式导入包含该组件的模块，而AppModule作为根模块，本身就不应该被其他模块导入。

正确方案：用SharedModule统一管理复用组件 #

Angular的模块分工逻辑很明确：

• CoreModule：用于存放全局单例服务、仅根模块/AppComponent层级使用的组件（比如全局导航、全局加载组件，这类不会被特性模块复用的元素），通常只会在AppModule里导入一次。
• SharedModule：专门用来存放需要跨多个模块复用的组件、指令、管道，并且必须把这些成员导出，供其他模块导入后使用。

具体操作步骤：

1. 在SharedModule中声明并导出SvgComponent：

@NgModule({
  declarations: [SvgComponent],
  exports: [SvgComponent] // 必须导出，才能让其他模块访问到该组件
})
export class SharedModule { }

2. 在需要使用SvgComponent的模块中导入SharedModule：
   • 在你的核心模块TrCoreModule的imports数组里添加SharedModule
   • 在你的特性模块TutorModule的imports数组里添加SharedModule
3. 关键注意：确保SvgComponent只在SharedModule中声明，不要再在AppModule、TrCoreModule或其他模块里重复声明——Angular禁止同一个组件被多个模块声明。

为什么之前的CoreModule方案不可行？ #

如果你把SvgComponent放在CoreModule里，哪怕导出它，特性模块要使用也必须导入CoreModule，但CoreModule通常包含全局单例服务，多次导入会导致服务实例重复创建，完全违背了CoreModule的设计初衷。

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