Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ajay_gummalla/micro-frontend-host) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@ajay_gummalla/micro-frontend-host

Angular library for hosting micro-frontends from any framework (React, Vue, Angular, Svelte) without using iframes.

Installation

npm install @ajay_gummalla/micro-frontend-host
# or
pnpm add @ajay_gummalla/micro-frontend-host
# or
yarn add @ajay_gummalla/micro-frontend-host

Quick Start

Option 1: NgModule-based App

1. Import Module

import { MicroFrontendHostModule } from '@ajay_gummalla/micro-frontend-host';

@NgModule({
  imports: [
    MicroFrontendHostModule
  ]
})
export class AppModule { }

2. Configure Routes

import { DynamicAppLoaderComponent } from '@ajay_gummalla/micro-frontend-host';

const routes: Routes = [
  {
    path: 'sales',
    component: DynamicAppLoaderComponent,
    data: {
      appName: 'salesDashboard',
      scriptUrl: 'http://localhost:4601/main.js',
      cssUrl: 'http://localhost:4601/styles.css',
      props: {
        title: 'Sales Dashboard',
        apiUrl: environment.apiUrl
      }
    }
  }
];

Option 2: Standalone App (Angular 14+)

1. Configure in main.ts or app.config.ts

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { DynamicAppLoaderComponent, ExternalAppLoaderService } from '@ajay_gummalla/micro-frontend-host';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    ExternalAppLoaderService,
    provideRouter([
      {
        path: 'sales',
        component: DynamicAppLoaderComponent,
        data: {
          appName: 'salesDashboard',
          scriptUrl: 'http://localhost:4601/main.js',
          cssUrl: 'http://localhost:4601/styles.css',
          props: {
            title: 'Sales Dashboard'
          }
        }
      }
    ])
  ]
});

3. Navigate

Navigate to /sales and your external app loads seamlessly!

Using Route Generator

import { generateMicroFrontendRoutes } from '@ajay_gummalla/micro-frontend-host';

const routes = generateMicroFrontendRoutes([
  {
    path: 'sales',
    appName: 'salesDashboard',
    scriptUrl: environment.salesUrl + '/main.js',
    props: { title: 'Sales' }
  },
  {
    path: 'inventory',
    appName: 'inventoryApp',
    scriptUrl: environment.inventoryUrl + '/main.js'
  }
]);

Preloading Apps

import { ExternalAppLoaderService } from '@ajay_gummalla/micro-frontend-host';

constructor(private appLoader: ExternalAppLoaderService) {
  this.appLoader.preloadApps([
    { appName: 'salesDashboard', scriptUrl: '...' }
  ]);
}

API

ExternalAppLoaderService

loadExternalApp(config) - Load an external app
loadExternalStyles(cssUrl) - Load CSS
preloadApps(configs) - Preload multiple apps
isAppLoaded(appName) - Check loading status
clearApp(appName) - Clear from cache

DynamicAppLoaderComponent

Component for rendering micro-frontends.

Types

import {
  MicroFrontendConfig,
  MicroFrontendRouteConfig,
  MicroFrontendMountProps,
  LoadedMicroFrontend
} from '@ajay_gummalla/micro-frontend-host';

External App Requirements

Your external apps must expose:

window.yourAppName = {
  mount: (props) => {
    // Render app
    return appInstance;
  },
  unmount: (instance) => {
    // Cleanup
  }
};

See @ajay_gummalla/micro-frontend-client for helpers.

Contributing

Contributions, suggestions, and improvements are welcome! If you have ideas for new features, bug fixes, or enhancements, please feel free to:

Open an issue on GitHub to report bugs or suggest features
Submit a pull request with your improvements
Share your feedback to help make this library better

Visit the repository: https://github.com/ajaygummalla20/MFE

We appreciate all contributions from the community!

License

MIT