mooa
0.1.2 • Public • PublishedMooa
A single SPA Utils for Angular 2+
based onsingle-spa &&single-spa-angular-cli
difference:
- Host <-> Apps Architecture
- Configurable App (no loader require)
- Independent App in Different Repo and runnable
Examples: see inexamples/
Online Demo:
- http://mooa.pho.im/ (host in AWS S3)
- http://mooa.phodal.com/ (host in GitHub Pages)
Features:
- SPA by Configurable file, ex:
apps.json
- Pluggable APP
- support Child APP navigate
- CLI for Generate Config
Goal:
- 构建插件化的 Web 开发平台,满足业务快速变化及分布式多团队并行开发的需求
- 构建服务化的中间件,搭建高可用及高复用的前端微服务平台
- 支持前端的独立交付及部署
Boilerplate
App Boilerplate:https://github.com/phodal/mooa-boilerplate
Usage
1. Install mooa
in Host and Child App
yarn add mooa
2. Config Host
- add get Apps logic in AppComponent (
app.component.ts
)
constructor(private renderer: Renderer2, http: HttpClient, private router: Router) {// config Mooathis.mooa = new Mooa({mode: 'iframe',debug: false,parentElement: 'app-home',urlPrefix: 'app',switchMode: 'coexist',preload: true,includeZone: true});http.get<IAppOption[]>('/assets/apps.json').subscribe(data => {this.createApps(data);},err => console.log(err));}private createApps(data: IAppOption[]) {data.map((config) => {this.mooa.registerApplication(config.name, config, mooaRouter.hashPrefix(config.prefix));});this.router.events.subscribe((event) => {if (event instanceof NavigationEnd) {this.mooa.reRouter(event);}});return this.mooa.start();}
3. Config App
- config App
main.ts
for load
import mooaPlatform from 'mooa';if (environment.production) {enableProdMode();}mooaPlatform.mount('help').then((opts) => {platformBrowserDynamic().bootstrapModule(AppModule).then((module) => {opts['attachUnmount'](module);});});
- setup app routing in
app.module.ts
const appRoutes: Routes = [{path: '*', component: AppComponent}...];@NgModule({declarations: [AppComponent,...],imports: [BrowserModule,RouterModule.forRoot(appRoutes)],providers: [{provide: APP_BASE_HREF, useValue: mooaPlatform.appBase()},],bootstrap: [AppComponent]})export class AppModule {}
- Add for handle URL Change in
app.component.ts
constructor(private router: Router) {mooaPlatform.handleRouterUpdate(this.router, 'app1');}
4. Setup apps.json with Mooa CLI
- install global cli
npm install -g mooa
- create URL list files
Examples:apps.txt
http://mooa.phodal.com/assets/app1http://mooa.phodal.com/assets/help
- Generate Config File
mooa -g apps.txt
Examples:
[{"name": "app1","selector": "app-app1","baseScriptUrl": "/assets/app1","styles": ["styles.bundle.css"],"prefix": "app/app1","scripts": ["inline.bundle.js","polyfills.bundle.js","main.bundle.js"]}]
Mooa Config
config in Host app'sapp.component.ts
this.mooa = new Mooa({mode: 'iframe',debug: false,parentElement: 'app-home',urlPrefix: 'app',switchMode: 'coexist'})
mode: 'iframe'
use iframe as application container:
<app-home _nghost-c2=""><iframe frameborder="" width="100%" height="100%" src="http://localhost:4200/app/help/homeassets/iframe.html" id="help_206547"></iframe></app-home>
switchMode: 'coexist'
hidden application when inactive:
<app-home _nghost-c2=""><app-app1 _nghost-c0="" ng-version="5.2.8" style="display: none;"><nav _ngcontent-c0="" class="navbar"></app-app1><iframe frameborder="" width="100%" height="100%" src="http://localhost:4200/app/help/homeassets/iframe.html" id="help_206547"></iframe></app-home>
For Angular Lazyload Module
inline.bundle.js
will load script for/
path.
So, just copy*.chunk.js
files todist/
, then deploy it.
API
registerApplicationByLink
exmples:
mooa.registerApplicationByLink('help', '/assets/help', mooaRouter.matchRoute('help'));
registerApplication
mooa.registerApplication(config.name, config, mooaRouter.matchRoute(config.prefix));
hybrid
if (config.sourceType) {that.mooa.registerApplicationByLink(config.name, config.link, mooaRouter.matchRoute(config.name));} else {that.mooa.registerApplication(config.name, config, mooaRouter.matchRoute(config.prefix));}
navigateTo Custom App
mooaPlatform.navigateTo({appName: 'help',router: 'home'});
License
Copyright (c) 2013-2014 Christopher SimpkinsCopyright (c) 2017-2018 Robin Coma Delperier
© 2018 APhodal Huang'sIdea. This code is distributed under the MIT license. SeeLICENSE
in this directory.
Package Sidebar
Install
npm i mooa
Repository
Homepage
Weekly Downloads
137
Version
0.1.2
License
MIT
Unpacked Size
388 kB
Total Files
76