@angular-architects/microapp

@angular-architects/microapp

This library support Micro App frontend development.

• @angular-architects/microapp
  • Supported features
  • Roadmap
  • Setup
    • Install node_module
    • Shell
    • Micro App
    • Routing
      • Deeplinking from Shell to Micro App
      • Experimental string-based Deeplinking from Shell to Micro App

Supported features

• Multi Router support in the same window object
• Support for Angular 13+
• Messaging API based on CustomEvents
  • influenced by RxJS and NgRx Action Creators
• Deep Linking across different Micro Apps

Roadmap

• Named router outlets w/i an Angular app
• Support for different versions and environment configs
• Headless shell infrastructure
• Cross tech support
  • React, Vue, AngularJS
• Distributed State Management

Setup

Install node_module

npm install @angular-architects/microapp 

Shell

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MicroAppRoutingModule.forShell({ name: 'shell' }),
    AppRoutingModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Micro App

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MicroAppRoutingModule.forMicroApp({ name: 'microapp' }),
    AppRoutingModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Routing

Use normal Angular route definitions and the routerLink Directive.

Deeplinking from Shell to Micro App

<a [routerLink]="[{ outlets: { 'microapp': 'mypath' }}]">Deeplink from Shell to Micro App -> mypath</a>

Experimental string-based Deeplinking from Shell to Micro App

<a routerLink="(microapp:mypath)">Deeplink string from Shell to Micro App -> mypath</a>