Angular懒加载模块中共享组件的使用问题及正确实现咨询

问题解答 #

首先明确：你遇到的这种情况是完全正常的，Angular的懒加载模块机制就是这样设计的。

为什么会出现这个问题？

Angular中，懒加载模块会创建一个独立的模块上下文和注入器，它不会继承父模块（比如这里的ShellModule）的导入依赖。也就是说，ShellModule导入了SharableModule，但懒加载的FooModule完全看不到这个依赖，所以SharableModule的导出组件自然无法在FooModule中使用。

而你直接把SharableComponent加到FooModule的declarations里会报错，是因为Angular的核心规则：一个组件只能在一个NgModule的declarations数组中声明，ShellModule已经通过SharableModule间接声明了这个组件，FooModule再声明就违反了这个规则。

正确的实现方式

解决这个问题的核心是让SharableModule成为一个可复用的共享模块，然后在每个需要它的模块（包括懒加载模块）中单独导入它，具体步骤如下：

1. 正确配置SharableModule
   确保SharableModule只负责声明和导出共享组件，服务则通过providedIn: 'root'实现单例共享，不要在模块的providers数组中添加服务：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { SharableComponent } from './sharable.component';
   import { SharableService } from './sharable.service';
   
   @NgModule({
     declarations: [SharableComponent], // 只在这里声明一次组件
     imports: [CommonModule], // 如果需要通用指令/管道，导入CommonModule
     exports: [SharableComponent] // 导出组件，让其他模块可以使用
   })
   export class SharableModule {}
   
   // 服务的配置：用providedIn: 'root'实现单例
   @Injectable({
     providedIn: 'root'
   })
   export class SharableService {}
   

2. 在ShellModule和FooModule中分别导入SharableModule
   不管是父模块还是懒加载子模块，只要需要使用SharableComponent，就直接导入SharableModule：

   // ShellModule的配置
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { SharableModule } from '../sharable/sharable.module';
   import { RouterModule } from '@angular/router';
   // 导入Shell的组件
   import { ShellComponent } from './shell.component';
   
   @NgModule({
     declarations: [ShellComponent],
     imports: [
       CommonModule,
       SharableModule, // 导入共享模块
       RouterModule.forChild([
         { path: 'foo', loadChildren: () => import('../foo/foo.module').then(m => m.FooModule) }
       ])
     ]
   })
   export class ShellModule {}
   

   // FooModule的配置
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { SharableModule } from '../sharable/sharable.module';
   import { RouterModule } from '@angular/router';
   import { FooComponent } from './foo.component';
   import { BarComponent } from './bar.component';
   
   @NgModule({
     declarations: [FooComponent, BarComponent],
     imports: [
       CommonModule,
       SharableModule, // 同样导入共享模块
       RouterModule.forChild([
         { path: '', component: FooComponent },
         { path: 'bar', component: BarComponent }
       ])
     ]
   })
   export class FooModule {}
   

这样做既不会出现组件重复声明的错误，又能让ShellModule和FooModule都正常使用SharableComponent和SharableService。

额外注意点

• 如果你的SharableModule中包含管道、指令等，也要把它们加到declarations和exports数组中，和组件的处理方式一致。
• 绝对不要在多个模块的declarations中声明同一个组件/管道/指令，这是Angular的硬性规则，会导致编译错误。

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