Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 1.17 KB

README.md

File metadata and controls

41 lines (32 loc) · 1.17 KB
Raw

Micro-Frontend Extensions

Just-in-time renderer for dynamic Angular components bundled with Module Federation.

Prerequisites

The package requires the following peer dependencies:

{
  "@angular/common": "^12.0.0",
  "@angular/core": "^12.0.0",
  "@angular-architects/module-federation": "^14.1.0"
}

Usage

Initialize your dynamic configuration:

const config: RemoteOutletConfig = {
  remoteEntry: "https://cdn.yourhost.com/remoteEntry.js",
  remoteName: "example_remote",
  module: "ExampleModule",
  component: "ExampleComponent",
  placeholder: {
    minHeight: 220
  }
}

Where

  • remoteEntry: URL to the main bundle from your Micro-Frontend
  • remoteName: name you've set as output.uniqueName in your Webpack Config
  • module: name of the NgModule that declares the providers and imports of your component
  • component: name of the Component you want to render
  • placeholder: dimensions of the placeholder-container shown during loading

Then, add this component to the Angular-Template where you want to render your dynamic Micro-Frontends:

<remote-outlet [config]="config"></remote-outlet>