ngx-planet

✨ Features

📖 Documentation

Alternatives

Installation

$ npm i @worktile/planet --save
// or
$ yarn add @worktile/planet

Demo

Usage

1. Loading NgxPlanetModule in the portal's AppModule

import { NgxPlanetModule } from '@worktile/planet';
@NgModule({
 imports: [
 CommonModule,
 NgxPlanetModule
 ]
})
class AppModule {}

2. Register applications to planet use PlanetService in portal app

@Component({
 selector: 'app-portal-root',
 template: `
 <nav>
 <a [routerLink]="['/app1']" routerLinkActive="active">应用1</a>
 <a [routerLink]="['/app2']" routerLinkActive="active">应用2</a>
 </nav>
 <router-outlet></router-outlet>
 <div id="app-host-container"></div>
 <div *ngIf="!loadingDone">加载中...</div>
 `
})
export class AppComponent implements OnInit {
 title = 'ngx-planet';
 get loadingDone() {
 return this.planet.loadingDone;
 }
 constructor(
 private planet: Planet
 ) {}
 ngOnInit() {
 this.planet.setOptions({
 switchMode: SwitchModes.coexist,
 errorHandler: error => {
 console.error(`Failed to load resource, error:`, error);
 }
 });
 this.planet.registerApps([
 {
 name: 'app1',
 hostParent: '#app-host-container',
 hostClass: 'thy-layout',
 routerPathPrefix: '/app1',
 preload: true,
 entry: "/static/app2/index.html"
 },
 {
 name: 'app2',
 hostParent: '#app-host-container',
 hostClass: 'thy-layout',
 routerPathPrefix: '/app2',
 preload: true,
 entry: {
 basePath: "/static/app1/"
 manifest: "index.html"
 scripts: [
 'main.js'
 ],
 styles: [
 'styles.css'
 ]
 }
 }
 ]);
 // start monitor route changes
 // get apps to active by current path
 // load static resources which contains javascript and css
 // bootstrap angular sub app module and show it
 this.planet.start();
 }
}

3. Sub App define how to bootstrap

defineApplication('app1', {
 template: `<app1-root class="app1-root"></app1-root>`,
 bootstrap: (portalApp: PlanetPortalApplication) => {
 return platformBrowserDynamic([
 {
 provide: PlanetPortalApplication,
 useValue: portalApp
 },
 {
 provide: AppRootContext,
 useValue: portalApp.data.appRootContext
 }
 ])
 .bootstrapModule(AppModule)
 .then(appModule => {
 return appModule;
 })
 .catch(error => {
 console.error(error);
 return null;
 });
 }
});

defineApplication('standalone-app', {
 template: `<standalone-app-root></standalone-app-root>`,
 bootstrap: (portalApp: PlanetPortalApplication) => {
 return bootstrapApplication(AppRootComponent, {
 providers: [
 {
 provide: PlanetPortalApplication,
 useValue: portalApp
 },
 {
 provide: AppRootContext,
 useValue: portalApp.data.appRootContext
 }
 ]
 }).catch(error => {
 console.error(error);
 return null;
 });
 }
});

Documents

Sub app configurations

Communication between applications use GlobalEventDispatcher

import { GlobalEventDispatcher } from "@worktile/planet";
// app1 root module
export class AppModule {
 constructor(private globalEventDispatcher: GlobalEventDispatcher) {
 this.globalEventDispatcher.register('open-a-detail').subscribe(event => {
 // dialog.open(App1DetailComponent);
 });
 }
}
// in other apps
export class OneComponent {
 constructor(private globalEventDispatcher: GlobalEventDispatcher) {
 }
 openDetail() {
 this.globalEventDispatcher.dispatch('open-a-detail', payload);
 }
}

Cross application component rendering

import { PlanetComponentLoader } from "@worktile/planet";
// in app1
export class AppModule {
 constructor(private planetComponentLoader: PlanetComponentLoader) {
 this.planetComponentLoader.register([App1ProjectListComponent]);
 }
}

<ng-container *planetComponentOutlet="'app1-project-list'; app: 'app1'; initialState: { search: 'xxx' }"></ng-container>
// or 
<ng-container planetComponentOutlet="app1-project-list"
 planetComponentOutletApp="app1"
 [planetComponentOutletInitialState]="{ term: 'xxx' }"
 (planetComponentLoaded)="planetComponentLoaded($event)">
</ng-container>

@Component({
 ...
})
export class OneComponent {
 private componentRef: PlanetComponentRef;
 constructor(private planetComponentLoader: PlanetComponentLoader) {
 }
 openDetail() {
 this.planetComponentLoader.load('app1', 'app1-project-list', {
 container: this.containerElementRef,
 initialState: {}
 }).subscribe((componentRef) => { 
 this.componentRef = componentRef;
 });
 }
 ngOnDestroy() {
 this.componentRef?.dispose();
 }
}

FAQ

infinite loop load portal app's js

// extra-webpack.config.js
{ 
 optimization: {
 runtimeChunk: false
 }
};

throw error Cannot read property 'call' of undefined at __webpack_require__ (bootstrap:79)

 ...
 "build": {
 "builder": "@angular-builders/custom-webpack:browser",
 "options": {
 "customWebpackConfig": {
 "path": "./examples/app2/extra-webpack.config.js",
 "mergeStrategies": {
 "module.rules": "prepend"
 },
 "replaceDuplicatePlugins": true
 },
 ...
 "vendorChunk": false,
 ...
 },
 },
 "serve": {
 "builder": "@angular-builders/custom-webpack:dev-server",
 "options": {
 ...
 "vendorChunk": false
 ...
 }
 }
...

throw error An accessor cannot be declared in an ambient context.

"compilerOptions": {
 "skipLibCheck": true
}

Production env throw error Cannot read property 'call' of undefined use router lazy load

output: { jsonpFunction: "app1" }

Development

npm run start // open http://localhost:3000
or
npm run serve:portal // 3000
npm run serve:app1 // 3001
npm run serve:app2 // 3002
// test
npm run test

Contributors ✨

LICENSE