Angular12中导入的模块为何会影响懒加载模块的依赖解析

核心原理说明 #

Angular的注入器存在分层规则，所有直接导入根模块AppModule的非懒加载模块，携带的providers都会被注册到全局根注入器，所有懒加载模块的注入器默认继承根注入器，可直接访问根注入器内的服务。按正常逻辑，AppModule直接导入CoreModule.forRoot()后，UserData应该注册到根注入器，懒加载的PagesModule可正常访问，出现该异常是CoreModule.forRoot实现缺陷 + 摇树优化共同作用的结果。

差异原因 #

同样导入CoreModule.forRoot()，二者效果不同的原因有两类：

1. CoreModule.forRoot实现不符合规范 #

   90%以上的该类问题都是CoreModule的forRoot写法错误导致的，常见错误如下：

   • forRoot方法返回的ModuleWithProviders未声明ngModule: CoreModule，仅返回了服务列表。此时AppModule导入CoreModule.forRoot()时，不会加载CoreModule自身@NgModule配置下的providers，如果UserData写在CoreModule自身的providers数组里，就不会被注册到根注入器。
   • forRoot返回的providers数组未包含UserData，仅在CoreModule的内部导入模块中携带了该服务，只有当CoreModule被完整加载时才会注册服务。

   而StrangeModule是直接导入到AppModule的非懒加载模块，它导入CoreModule.forRoot()时会触发CoreModule完整的模块加载逻辑，UserData被正确注册到根注入器，因此懒加载模块可正常访问。

2. 摇树优化剔除了未被引用的服务 #

   如果AppModule以及AppModule直接导入的所有模块、组件、服务中，没有任何地方显式引用UserData，只有懒加载的PagesModule内使用了UserData，生产构建的摇树优化会判定UserData未被使用，将其从根注入器的注册列表中剔除。
   若StrangeModule内部存在对UserData的显式引用，或者StrangeModule导入CoreModule.forRoot()时触发了编译器的服务保留逻辑，UserData就不会被摇树优化删除，因此可以正常注入。

修复方案 #

• 按照Angular官方规范重写CoreModule的forRoot方法，所有全局单例服务统一放在forRoot返回的providers数组中，不要分散写在CoreModule自身的providers或内部导入模块中：

@NgModule({
  // 此处仅放组件、管道、指令的声明和导入导出，不要放全局服务
  declarations: [],
  imports: [CommonModule],
  exports: []
})
export class CoreModule {
  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [
        UserData,
        // 其他全局单例服务
      ]
    }
  }
}

• 全局单例服务优先使用@Injectable({ providedIn: 'root' })声明，不要重复在模块的providers数组中注册，避免出现注册冲突。
• 如果是摇树优化导致的服务丢失，可在根组件AppComponent或任意根级服务中显式注入一次UserData，强制编译器保留该服务。

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