Project of Concept micro frontend application

• Create monorepo
• Create g-frame
• Create l-app1
• Add Module Federation
• Add Webpack Config in package.json
• Run with docker

ng new mfe-app --create-application false

ng config cli.packageManager yarn

ng g application gframe --routing --style=scss

ng g c home --project gframe

Add routing

  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  }

Create html

  <h1>Welcome in Angular MFE G-Frame</h1>
  <router-outlet></router-outlet>

ng g application l-app1 --routing --style=scss

ng g c home --project l-app1

ng g m l-app1 --routing --project=l-app1

ng g c home --project l-app1

Add routing in LApp1RoutingModule

  {
    path: '',
    component: HomeComponent
  }

Add routing in

  {
    path:'',
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: 'l-app1',
    loadChildren: () => import("./l-app1/l-app1.module").then((m) => m.LApp1Module),
  },

Create html in app.component

  <h1>MFE 1 </h1><br>
  <a routerLink="/">Home</a><br>
  <a routerLink="/l-app1">L-App1</a>
  <router-outlet></router-outlet>

ng add @angular-architects/module-federation --project gframe --port 4200

ng add @angular-architects/module-federation --project l-app1 --port 4201

only for node v^12 || 14

  "resolutions" : {
  "webpack": "5.27.2"
  "license-webpack-plugin": "2.3.17"
  }

in g-frame

  remotes: { "lApp1": "lApp1@http://localhost:4201/lApp1remoteEntry.js"}

  //add decl.d.ts in gframe/src/app
  declare module 'lApp1/LApp1Module'

in l-app1

  name: "lApp1",
  filename: "lApp1remoteEntry.js",
  exposes: {'./LApp1Module': './projects/l-app1/src/app/l-app1/l-app1.module.ts'}

build

docker build -t g-frame -f gframe-dockerfile .

docker build -t l-app1 -f lapp1-dockerfile .

run

docker run -d -p 4200:80 g-frame

docker run -d -p 4201:80 l-app1

or

docker-compose up -d