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

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应用程序下，这是一个承载其他应用程序(微前端(的容器应用程序。容器应用程序将加载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)

提前感谢您抽出时间！

Answer 1

问题是我为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是将托管微前端的自定义元素