迁移到微前端结构后没有动态创建组件的提供者

如何解决迁移到微前端结构后没有动态创建组件的提供者

堆栈太复杂了，无法重新创建，所以请提前原谅我并询问我更多信息。

Angular 应用程序具有以下结构：

@NgModule({
  imports:[
    SharedModule
  ],declarations: [
    // These two components share common state
    // in ServiceFoo.
    // ParentComponent will call the ModalService
    // to render the DynamicallyRenderedComponent
    // into a modal.
    ParentComponent,DynamicallyRenderedComponent
  ],providers: [
    ServiceFoo
  ]
})
export class FeatureModule {} // This module is lazy loaded

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@NgModule({
  imports:[
    OverlayModule
  ],declarations: [
    // Hosts a component using ViewContainerRef
    // and ComponentFactoryResolver
    HostComponent
  ],providers: [
    // displays the modal (HostComponent) and passes in 
    // the component we want to display in the modal
    ModalService
  ]
})
export class SharedModule {}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

// Of-course at the top there is the AppModule that includes all

现在这个设置一直运行良好，直到我将客户端移到 React 应用程序下，这是一个托管其他应用程序（微前端）的容器应用程序。容器应用将加载 NG 客户端的脚本并在 React 应用中引导应用。

除了动态渲染组件的依赖注入外，一切正常。他们停止访问模块中声明的服务，从而抛出臭名昭著的错误：

react_devtools_backend.js:2560 NullInjectorError: R3InjectorError(AppModule)[ServiceFoo -> ServiceFoo -> ServiceFoo]: 
  NullInjectorError: No provider for ServiceFoo!
    at NullInjector.get (core.js:1013)
    at R3Injector.get (core.js:11122)
    at R3Injector.get (core.js:11122)
    at R3Injector.get (core.js:11122)
    at NgModuleRef$1.get (core.js:24243)
    at Object.get (core.js:22142)
    at getorCreateInjectable (core.js:4079)
    at ɵɵdirectiveInject (core.js:14651)
    at NodeInjectorFactory.ParentComponent [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:4184)

提前感谢您的时间！

解决方法

问题是我为 Angular 应用程序做引导程序的方式

错误的做法：

import {createCustomElement} from '@angular/elements';

@NgModule({....})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector,private router: Router) {
    const micro = createCustomElement(MainComponent,{injector: this.injector});
    customElements.define(appContainer,micro);
  }

  ngDoBootstrap(): void {
    this.router.initialNavigation();
  }
}

正确的做法：

@NgModule({....})
export class AppModule implements DoBootstrap {
  constructor(private router: Router) {}

  ngDoBootstrap(appRef: ApplicationRef): void {
    this.router.initialNavigation();
    appRef.bootstrap(MainComponent,appContainer);
  }
}

*appContainer 是将托管微前端的自定义元素