@iaktech26/web-component-loader

An Angular library that dynamically loads web components for micro-frontend (MFE) architecture. It simplifies integrating independently built and deployed Angular applications as web components within a host application.

Installation

npm install @iaktech26/web-component-loader

Requires Angular 18, 19, or 20 as a peer dependency.

Usage

1. Use the WebMFELoader component

Import and add the component to your Angular template:

import { Component } from '@angular/core';
import { WebMFELoader } from '@iaktech26/web-component-loader';

@Component({
  selector: 'app-root',
  imports: [WebMFELoader],
  template: `
    <web-mfe-loader
      mfeName="admin-dashboard"
      mfeMode="standalone">
    </web-mfe-loader>
  `
})
export class AppComponent {}

The component fetches /<mfeName>/remoteConfig.json, loads the scripts, and renders the custom element.

2. Configure your micro-frontend

Each MFE must expose a remoteConfig.json at its root:

{
  "name": "admin-dashboard",
  "entry": {
    "mainUrl": "https://your-mfe-host.com/main.js",
    "polyfillsUrl": "https://your-mfe-host.com/polyfills.js"
  }
}

3. Advanced: use the service directly

import { WebComponentLoaderService } from '@iaktech26/web-component-loader';

export class MyComponent {
  constructor(private loader: WebComponentLoaderService) {}

  async loadMfe() {
    await this.loader.loadMfeFromConfig('/my-mfe/remoteConfig.json');
  }
}

API

WebMFELoader component

| Input | Type | Default | Description | |-----------|--------|---------|---------------------------------------------------| | mfeName | string | '' | Name of the MFE (used for config URL and element) | | mfeMode | string | '' | Value passed to the web component via mfe-mode |

WebComponentLoaderService

| Method | Description | |-----------------------------------------|--------------------------------------------------------| | loadMfeFromConfig(configUrl: string) | Fetches the remote config and loads the MFE scripts | | loadScript(url: string) | Loads a single ES module script, with deduplication |

Features

• Dynamic loading of Angular web components
• Automatic script deduplication (same MFE is never loaded twice)
• ES module script support
• Polyfills support
• Angular standalone components
• TypeScript support

License

MIT