[英]Different approach to utilize Angular Micro-Frontend remotes in the host Angular app
Context:语境:
I have 2 Angular 13 applications, 1 as remote and the other as host and using Module Federation to configure both remote(creating mfe) and host.我有 2 Angular 13 个应用程序,1 个作为远程应用程序,另一个作为主机,并使用 Module Federation 配置远程(创建 mfe)和主机。
All Module Federation examples directs us to load the remote module in the host like this所有 Module Federation 示例都指导我们像这样在主机中加载远程模块
{
path: 'kpi',
loadChildren: () =>
loadRemoteModule({
remoteEntry:
'http://localhost:58777/dist/megaHrx/remoteEntry.js',
remoteName: 'mfe1',
exposedModule: './KpiModule'
}).then((m) => m.ChangeKpiModule)
}
While my remote Module is as following:而我的远程模块如下:
@NgModule({
declarations: [ChangeKpiComponent],
imports: [CommonModule, ChangeKpiRoutingModule],
providers: [AbbbbbService , StorageService]
})
export class ChangeKpiModule {}
Question:问题:
This works and my Remote component ChangeKpiComponent
gets rendered under the route kpi
as expected, but what my intention is to use this ChangeKpiComponent
via its selector admin-reporting-change-kpi
and not by directly loading it via loadChildren in the Routing module.这有效,我的远程组件ChangeKpiComponent
按预期在路由kpi
下呈现,但我的意图是通过其选择器admin-reporting-change-kpi
使用此ChangeKpiComponent
,而不是通过 Routing 模块中的 loadChildren 直接加载它。
Is there a way to do that?有没有办法做到这一点? If yes, How?如果是,如何?
I think you can achieve that as follows:我认为您可以通过以下方式实现:
loadRemoteModule
method.使用loadRemoteModule
方法将其加载到您的主机应用程序中。loadRemoteModule
.根据从loadRemoteModule
返回的类型创建一个动态组件。@Directive({ selector: '[adHost]' })
export class AdHostDirective {
constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit(): void {
loadRemoteModule({
remoteEntry: 'http://localhost:58777/dist/megaHrx/remoteEntry.js',
remoteName: 'mfe1',
exposedModule: './KpiComponent', // <<<< Use the component expose
}).then((m) => {
const componentType = m.ChangeKpiComponent; // <<<< The component's type here.
// Create the component in this view-container:
this.viewContainerRef.createComponent(componentType);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.