Как использовать Angular Module Federation для импорта всего приложения

Question

Я новичок в Ng Module Federation, но думаю, что у меня есть суть. Моя проблема в том, что большинство ссылок, которые я видел, либо импортируют один компонент, либо модуль, который лениво загружается в маршрутизатор. Я хотел бы включить на страницу все мини-приложение. Общая идея состоит в том, чтобы иметь поведение, подобное iFrame, без iFrame.

У меня есть исходное приложение, открывающее файл app.module.ts, и это, похоже, работает. Однако я не могу понять синтаксис для импорта этого модуля и использования его в качестве компонента в существующем компоненте.

Я попытался добавить loadRemoteModule({...}) в импорт модуля, в котором есть компонент, который будет использовать вложенное «представление приложения». Но это асинхронная функция, на раз и на два, что делать дальше я не знаю.

Кто-нибудь знает, как импортировать модуль и использовать его компоненты?

Answer 1

Я понял это и попытаюсь обобщить здесь:

• Настройте веб-пакет для федерации модулей для модуля, который вы хотите выставить «как обычно». Здесь вы получите открытый URL-адрес для использования ниже. Ссылка здесь: https://module-federation.github.io/blog/get-started#:~:text=%3E%20yarn%20dev-,Start,-Federating

• В приложении оболочки (тот, который использует федеративный модуль):

  • создайте раздел «remotes:» с именем удаленного модуля и 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, здесь для удобочитаемости, вы можете использовать свои собственные имена.