Let's deep dive into implementing Angular Micro Frontends (MFEs) with Module Federation, focusing on how closures help isolate modules and dynamically load remote components.

---

1️⃣ What is Module Federation in Angular?

Module Federation, introduced in Webpack 5, allows multiple independent Angular apps to communicate while remaining separately deployable.
✅ Load Angular modules dynamically at runtime
✅ Isolate dependencies using closures
✅ Improve performance by sharing common libraries

---

2️⃣ How Closures Play a Role in Angular Micro Frontends

🔍 Why Use Closures?

• Each Micro Frontend encapsulates its dependencies in a closure, preventing global namespace conflicts.

• Lazy loading ensures that a module is loaded only when needed, reducing initial bundle size.

• Isolated runtime execution means each MFE runs inside its own function scope.

🔹 Example: How Module Federation Uses Closures

const mfe1 = (() => {
  let instance; // Closure keeps track of MFE instance

  return {
    init: function () {
      if (!instance) {
        instance = new AngularMFE(); // Closure ensures singleton instance
      }
      return instance;
    }
  };
})();

• The closure hides internal state (instance), ensuring each MFE loads only once.

• When mfe1.init() is called, it either returns an existing instance or creates a new one.

---

3️⃣ Implementing Angular Micro Frontends (Step-by-Step)

We’ll create: ✅ Shell App (Host Application) – Loads micro frontends dynamically.
✅ Remote App (Micro Frontend) – Exposes Angular components to the shell.

---

📌 Step 1: Install Webpack 5 Module Federation Plugin

Run:

ng add @angular-architects/module-federation

This installs Module Federation in your Angular app.

---

📌 Step 2: Setup Remote Micro Frontend

🔹 Configure webpack.config.js for the Remote App

Modify projects/mfe1/webpack.config.js:

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  output: {
    publicPath: "http://localhost:4201/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
        "./Component": "./src/app/mfe1/mfe1.component.ts",
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

🔍 Key Features of Closures Here

• exposes: { "./Component": "./src/app/mfe1/mfe1.component.ts" }
  🔹 Encapsulates MFE inside a closure so that it's accessible only via API calls.

• shared: ["@angular/core", "@angular/common"]
  🔹 Prevents duplicate dependencies, reducing bundle size.

---

📌 Step 3: Setup Shell App (Host Application)

🔹 Configure webpack.config.js for the Shell

Modify projects/shell/webpack.config.js:

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        mfe1: "mfe1@http://localhost:4201/remoteEntry.js",
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

🔍 Key Features of Closures Here

• "mfe1@http://localhost:4201/remoteEntry.js"
  🔹 Calls the closure inside mfe1 to dynamically load its module at runtime.

---

📌 Step 4: Dynamically Load Remote Module in the Shell

Modify app-routing.module.ts in shell:

const routes: Routes = [
  { path: 'mfe1', loadChildren: () => import('mfe1/Component').then(m => m.Mfe1Component) }
];

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

🔍 What Happens Internally?

1. When navigating to /mfe1, the shell calls import('mfe1/Component').

2. Webpack fetches remoteEntry.js from mfe1.

3. The exposes closure returns the Mfe1Component instance.

4. The module is loaded into the host at runtime.

---

🚀 Running the Micro Frontend System

1. Start the remote app:

ng serve mfe1 --port 4201

2. Start the shell app:

ng serve shell --port 4200

3. Navigate to http://localhost:4200/mfe1
   ✅ The Micro Frontend dynamically loads inside the shell! 🎉

---

🔥 Key Benefits of Using Closures in Angular Micro Frontends

✅ Encapsulation: Each MFE is self-contained inside a closure, preventing conflicts.
✅ Lazy Loading: Components load only when needed, improving performance.
✅ Singleton Instances: Closures ensure that MFEs don’t reload unnecessarily.