如何使用 Angular Module Federation 导入整个应用程序答案

【问题标题】：How to use Angular Module Federation to import an entire app如何使用 Angular Module Federation 导入整个应用程序
【发布时间】：2022-12-03 00:47:55
【问题描述】：

我是 Ng Module Federation 的新手，但我想我已经掌握了它的要点。我的问题是我看到的大多数参考要么导入单个组件，要么导入路由器中延迟加载的模块。我想在一个页面中包含一个完整的迷你应用程序。一般的想法是在没有 iFrame 的情况下具有类似 iFrame 的行为。

我有公开 app.module.ts 文件的源应用程序，这似乎有效。但是，我无法弄清楚导入此模块并将其用作现有组件中的组件的语法。

我尝试将 loadRemoteModule({...}) 添加到具有将使用嵌套“应用程序视图”的组件的模块的导入中。但是这是一个异步函数，对于一二来说，我不知道接下来要做什么。

有谁知道如何导入模块并使用其组件？

【问题讨论】：

你有没有得到任何参考来实现这个？

标签： angular angular-module webpack-module-federation angular-module-federation

【解决方案1】：

我想通了，并会尝试在这里总结一下：

为您希望“正常”公开的模块设置模块联合的 webpack。参考这里：https://module-federation.github.io/blog/get-started#:~:text=%3E%20yarn%20dev-,Start,-Federating
在 shell 应用程序中（使用联合模块的应用程序：
- 创建“远程：”部分，其中包含远程模块的名称和 URL。
```
   remotes: {
      'myMicroFE@https://mywebsite.com/myMicroFE.js'
   }
```

在模板中创建将包含 MicroFE 的父组件：

   <app-micro-fe-component></app-micro-fe-component>

和 .ts 文件中的类似代码：

 async ngOnInit() {
  const appModule: NgModule = await loadRemoteModule(
  {
   remoteEntry: 'https://mywebsite.com/myMicroFE.js',
   remoteName: 'myMicroFE',
   exposedModule: './AppModule',
  }
 );
 const appModuleRef: NgModuleRef<any> = createNgModuleRef(
  appModule['AppModule'],
  this.injector
 );
 const microFEComponent = this.vcref.createComponent(
  appModuleRef.instance.getComponent()
 );
// Sample interaction with the component.
this.renderer.listen('window', 'message', (event) => {
  if (event.data && event.data.providerId) {
    this.microFEClicked.emit(event.data);
  }
 });
 ...

显然，像 MyMicroFE 这样的名称是为了便于阅读，您可以使用自己的名称。

【讨论】：