Angular Microfrontend Module Federation Tutorial – Part 3

ng g c main-content
ng g c side-content

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "mfe2",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

      // For remotes (please adjust)
      name: "mfe2",
      filename: "mfe2.js",
      exposes: {
        './MainContentComponent': path.resolve(__dirname, './src/app/component/main-content/main-content.component.ts'),
        './SideContentComponent': path.resolve(__dirname, './src/app/component/side-content/side-content.component.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()
      })

    }),
    sharedMappings.getPlugin()
  ],
};

ng g d creator

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

@Directive({
  selector: '[appCreator]'
})
export class CreatorDirective {

  private componentData: ICompData = {} as ICompData;

  @Input('appCreator') set data(value: ICompData) {
    this.componentData = value;
  }

  constructor(private viewContainerRef: ViewContainerRef) { }

  ngOnInit() {
    return this.componentInit()
  }

  private async componentInit() {
    Promise.all([
      loadRemoteModule({
        type: 'module',
        remoteEntry: this.componentData.mfLink,
        exposedModule: './' + this.componentData.module
      }).then(m => {
        console.log('m', m);
        return this.viewContainerRef.createComponent(m[this.componentData.module]);
      }).catch(e => {
        console.log(e);
      })
    ]).catch(e => {
      console.log(e);
    })

  }

}
export interface ICompData {
  module: string,
  mfLink: string
}

export class MainContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

ng g c content

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

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {
  private _componentData: ICompData = {} as ICompData;
  @Input() set componentData(value: ICompData) {
    this._componentData = value;
  }
  get componentData() {
    return this._componentData;
  }
  constructor() { }

  ngOnInit(): void {
  }

}

<div class="border">
    <p>content works!</p>
    <ng-template [appCreator]="componentData" *ngIf="componentData.mfLink">
    </ng-template>
</div>

.border {
    border: 1px solid rebeccapurple;
    margin: 5px;
}

ng g c home

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' };
  public side: ICompData = { module: 'SideContentComponent', mfLink: 'http://localhost:3001/mfe2.js' };
  constructor() { }

  ngOnInit(): void {
  }

}

<p>home works!</p>
<app-content [componentData]="main"></app-content>
<app-content [componentData]="side"></app-content>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'lazy', loadChildren: () => import('mfe1/MainModule').then(m => {
      console.log(m);
      
      return m.MainModule;
    })
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }