microzord

What is it?

It is a small tool that allows you to add and render multiple apps on one page. It has simple ideomatic APIs for all modern frameworks and builds bridges between them.

🧙 Framework agnostic. You can have an Angular application with a React app header and a Vue app footer. Each app can have endless amount of nested apps inside. There are also wrappers for every modern framework with simple API.

🧩 Modular. You can insert another app in your app in any place as an ordinary component. Use the same methods to bind data and to handle its events.

🐝 Tiny as a bee and works as well. No new code in the bundle of child application and a bit more than 1 KB library for host application to get all the benefits!

Angular version support

| Microzord Version | Angular version | | ----------------- | --------------- | | v2.x | 16+ | | v1.x | 12 - 15 |

Installation and usage

An extensive demo is coming soon...

An example of usage external apps in Angular app

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideMicrozordHost({
      apps: [
        {
          name: 'remote-header',
          load: () => import('my-app-in-react').then((m) => m.MyHeader),
        },
        {
          name: 'remote-footer',
          load: () => import('my-app-in-angular').then((m) => m.MyFooter),
        },
      ],
    }),
  ],
};

Usage in application:

import {Component} from '@angular/core';
import {MicrozordAppModule} from '@microzord/angular';

@Component({
  selector: 'app-root',
  imports: [MicrozordAppModule],
})
export class App {}

<header [microzordApp]="'remote-header'"></header>

<footer [microzordApp]="'remote-footer'"></footer>

Core team

License

🆓 Feel free to use our library in your commercial and private applications

All microzord packages are covered by Apache 2.0

Read more about this license here