将Angular模块暴露为Web组件遇依赖问题求助

我尝试将应用的部分功能暴露给第三方，为此在同一工作区新建了一个项目并创建了如下模块：

@NgModule({
  declarations: [
    NewModule
  ],
  imports: [
    OtherProjectModule
  ],
  providers: [
  ]
})
export class NewModule{
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const element = createCustomElement(MyWidgetComponent, {injector: this.injector});
    customElements.define('my-widget', element);
  }
}

随后创建了仅包含自定义元素标签的索引文件：

<my-widget></my-widget>

MyWidgetComponent的模板仅引用了其他模块的组件标签：

<other-project-component></other-project-component>

启动应用时出现了NullInjectorError错误：

ERROR NullInjectorError: R3InjectorError[A-> A-> B-> C-> C-> C]

尝试将错误中提到的所有依赖添加到NewModule的providers数组：

providers: [A, B, C]

但持续添加缺失依赖时又遇到了疑似循环依赖的NG0204错误。现提出以下问题：

1. 当前的实现流程是否正确？能否将主应用的模块作为Web组件供第三方使用？
2. 能否在尽量不修改原项目代码的前提下，无需手动指定所有依赖？

问题1解答 #

当前实现流程存在错误，但完全可以将主应用的模块封装成Web组件供第三方使用。核心问题出在NewModule的配置和依赖注入上下文的处理上：

• declarations数组错误地放入了NewModule本身，该数组应该声明组件（如MyWidgetComponent）而非模块；
• 直接在NewModule中导入OtherProjectModule时，原模块的依赖注入上下文无法被完整继承，导致依赖缺失；手动添加依赖会因为原应用依赖链复杂，极易触发循环依赖问题。

问题2解答 #

可以做到尽量不修改原项目代码，无需手动指定所有依赖。核心思路是复用主应用的根注入器上下文，让Web组件直接继承整个应用的依赖环境：

步骤1：修正NewModule配置 #

确保declarations中声明正确的组件，并导出该组件：

@NgModule({
  declarations: [MyWidgetComponent], // 替换为实际组件，而非模块
  imports: [OtherProjectModule],
  exports: [MyWidgetComponent] // 导出组件以便被自定义元素包装
})
export class NewModule {}

步骤2：利用主应用根注入器创建自定义元素 #

在主应用的根模块（如AppModule）中，使用根注入器来包装MyWidgetComponent，这样Web组件就能直接复用主应用的所有依赖：

export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    // 若主应用需要正常启动，保留原bootstrap逻辑；若仅需Web组件可省略
    // platformBrowserDynamic().bootstrapModule(AppModule);

    // 使用根注入器包装组件
    const element = createCustomElement(MyWidgetComponent, { injector: this.injector });
    customElements.define('my-widget', element);
  }
}

步骤3：独立构建Web组件包（可选） #

如果需要单独构建Web组件包，不依赖主应用完整构建，可以结合@angular/elements和自定义构建配置，将MyWidgetComponent及依赖的OtherProjectModule打包为独立的Web组件bundle。Angular会自动处理依赖注入的打包，无需手动添加providers。

额外注意事项 #

• 确保OtherProjectModule中的组件、服务均已导出，以便Web组件模块能正常访问；
• 若原应用存在懒加载模块，需确保依赖模块已被预加载或直接导入，避免运行时依赖缺失。

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