Angular独立组件Provider未被检测？ESM构建依赖注入问题

核心原因 #

动态创建组件与静态组件的注入器上下文存在差异，再加上自定义ESM构建的优化策略，共同导致了这个问题：

• 静态组件的注入上下文：直接在模板中使用MyContentComponent时，它的注入器继承自宿主组件的注入器（而宿主组件属于MyModule，该模块已导入MyTestLibModule，因此能获取到MyTestLibService）。
• 动态组件的注入上下文：通过Overlay动态创建组件时，默认使用的是Overlay自身的注入器（或根注入器的子集），而非MyModule的注入器。在自定义ESM构建下，由于开启了更严格的Tree Shaking或模块解析策略，Angular无法隐式将MyTestLibModule的Provider合并到动态组件可访问的注入器中，导致子组件MyChildComponent找不到服务。
• 自定义构建的元数据丢失：部分自定义ESM构建器可能未正确处理Angular的装饰器元数据（比如@NgModule的imports配置），导致MyTestLibModule的Provider未被正确注册到依赖注入系统中，仅在静态组件的依赖链中被保留，动态组件的依赖链则被优化剔除。

解决方案 #

1. 显式指定动态组件的注入器
   在创建Overlay或动态组件时，传入宿主组件的注入器（该注入器继承了MyModule的Provider）：

   // 宿主组件中获取自身注入器
   constructor(private injector: Injector, private overlay: Overlay) {}
   
   createDynamicComponent() {
     const overlayRef = this.overlay.create({ injector: this.injector });
     const componentRef = overlayRef.attach(ComponentPortal(MyContentComponent));
   }
   

2. 让独立组件显式导入依赖模块
   修改MyContentComponent的独立组件配置，显式导入MyTestLibModule，确保它的注入器自身包含所需的Provider：

   @Component({
     selector: 'my-content',
     template: '<my-child></my-child>',
     standalone: true,
     imports: [MyChildComponent, MyTestLibModule] // 显式添加MyTestLibModule
   })
   export class MyContentComponent {}
   

3. 调整自定义ESM构建的优化策略
   检查构建器的Tree Shaking或压缩配置，确保Angular的装饰器元数据不被剔除：

   • 若使用ESBuild，添加配置保留@NgModule、@Injectable等装饰器的元数据；
   • 若使用Terser，禁用对Angular元数据属性（如ɵmod、ɵprov）的压缩。

4. 将服务改为根级提供
   如果MyTestLibService是全局单例服务，修改其@Injectable配置为根级提供，这样所有组件（无论静态还是动态）都能从根注入器获取到服务：

   @Injectable({ providedIn: 'root' }) // 替换原有的providedIn配置
   export class MyTestLibService {}
   

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