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

Question

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

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 应用程序下之前，此设置一直运行良好，React 应用程序是一个托管其他应用程序（微前端）的容器应用程序。容器应用程序将加载 NG 客户端的脚本和 bootstrap 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.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)

提前感谢您的宝贵时间！

Answer 1

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

错误的做法：

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 是将承载微前端的自定义元素

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

No provider for dynamically created component after migration to micro-fronts structure

dependency-injection

angular

micro-frontend