Angular Microfrontend Module Federation Tutorial – Part 4

import { loadRemoteModule } from '@angular-architects/module-federation';
import { createNgModuleRef, Directive, Injector, Input, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appCreator]'
})
export class CreatorDirective {
  @Input('appCreator') set data(value: ICompData) {
    this.componentInit(value);
  }
  constructor(private vcr: ViewContainerRef, private injector: Injector) { }
  private async componentInit(componentData: ICompData) {
    Promise.all([
      loadRemoteModule({
        type: 'module',
        remoteEntry: componentData.mfLink,
        exposedModule: './' + componentData.module
      }).then(m => {
        if (m[componentData.compName]) {
          return this.vcr.createComponent(m[componentData.compName], { injector: this.injector });
        } else {
          const moduleRef = createNgModuleRef(m[componentData.module], this.injector);
          const microComp = this.vcr.createComponent<any>(m[componentData.module].ɵmod.exports.find(
            (c: any) => { return c.name === componentData.compName }
          ), { ngModuleRef: moduleRef });
          microComp.instance.data = 'HI :)';
          return microComp;
        }
      }).catch(e => { console.warn(e); })
    ]).catch(e => { console.warn(e); })
  }
}
export interface ICompData {
  module: string,
  mfLink: string,
  compName: string
}

<app-content [componentData]="main"></app-content>
<app-content [componentData]="side"></app-content>
<app-content [componentData]="partOne"></app-content>

import { Component, OnInit } from '@angular/core';
import { ICompData } from 'src/app/directives/creator.directive';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public main: ICompData = { module: 'MainContentComponent', mfLink: 'http://localhost:3001/mfe2.js', compName: 'MainContentComponent' };
  public side: ICompData = { module: 'SideContentComponent', mfLink: 'http://localhost:3001/mfe2.js', compName: 'SideContentComponent' };
  public partOne: ICompData = { module: 'CollectionModule', mfLink: 'http://localhost:3000/mfe1.js', compName: 'PartOneComponent' };
  constructor() { }

  ngOnInit(): void {
  }

}

ng g m collection

ng g c part-one
ng g c part-two

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PartOneComponent } from './part-one/part-one.component';
import { PartTwoComponent } from './part-two/part-two.component';

const DEC_AND_EXP = [
  PartOneComponent,
  PartTwoComponent
]

@NgModule({
  declarations: [
    [...DEC_AND_EXP]
  ],
  imports: [
    CommonModule
  ],
  exports: [
    [...DEC_AND_EXP]
  ]
})
export class CollectionModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SubPageComponent } from './pages/sub-page/sub-page.component';
import { CollectionModule } from './components/collection/collection.module';

@NgModule({
  declarations: [
    AppComponent,
    SubPageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CollectionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  new ModuleFederationPlugin({
      library: { type: "module" },

      // For remotes (please adjust)
      name: "mfe1",
      filename: "mfe1.js",
      exposes: {
        './MainModule': path.resolve(__dirname, 'src/app/pages/main/main.module.ts'),
        './CollectionModule': path.resolve(__dirname, 'src/app/components/collection/collection.module.ts')
      },



      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

        ...sharedMappings.getDescriptors()
      })

    }),

import { loadRemoteModule } from '@angular-architects/module-federation';
import { createNgModuleRef, Directive, Injector, Input, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appCreator]'
})
export class CreatorDirective {
  @Input('appCreator') set data(value: ICompData) {
    this.componentInit(value);
  }
  constructor(private vcr: ViewContainerRef, private injector: Injector) { }
  private componentInit(componentData: ICompData) {
    return Promise.all([
      componentData.module === componentData.compName ?
        loadRemoteModule({
          type: 'module',
          remoteEntry: componentData.mfLink,
          exposedModule: './' + componentData.module
        }).then((m: any) => {
          return this.vcr.createComponent(m[componentData.compName], { injector: this.injector });
        }) :
        loadRemoteModule({
          type: 'module',
          remoteEntry: componentData.mfLink,
          exposedModule: './' + componentData.module
        }).then(m => {
          const moduleRef = createNgModuleRef(m[componentData.module], this.injector);
          Promise.all([
            loadRemoteModule({
              type: 'module',
              remoteEntry: componentData.mfLink,
              exposedModule: './' + componentData.compName
            })
          ]).then((c: any) => {
            const microComp = this.vcr.createComponent<any>(c[0][componentData.compName], { ngModuleRef: moduleRef });
            return microComp;
          })
        }).catch(e => { console.warn(e); })
    ]).catch(e => { console.warn(e); })
  }
}
export interface ICompData {
  module: string,
  mfLink: string,
  compName: string
}

 exposes: {
        './MainModule': path.resolve(__dirname, 'src/app/pages/main/main.module.ts'),
        './CollectionModule': path.resolve(__dirname, 'src/app/components/collection/collection.module.ts'),
        './PartOneComponent': path.resolve(__dirname, 'src/app/components/collection/part-one/part-one.component.ts')
      },