angular - 如何使用 Angular Module Federation 导入整个应用程序

Question

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

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

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

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

Answer 1

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

• 为您希望“正常”公开的模块设置用于模块联合的 webpack。这是您将在下面获得要使用的公开 URL 的地方。此处引用:https://module-federation.github.io/blog/get-started#:~:text=%3E%20yarn%20dev-,Start,-Federating

• 在 shell 应用程序(使用联合模块的应用程序)中:

  • 使用远程模块的名称和 URL 创建“remotes:”部分。

       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 这样的名称是为了便于阅读，您可以使用自己的名称。