Mooa
A single SPA Utils for Angular 2+
based on single-spa && single-spa-angular-cli
difference:
- Host <-> Apps Architecture
- Configurable App (no loader require)
- Independent App in Different Repo and runnable
Examples: see in examples/
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
)
constructorprivate renderer: Renderer2, http: HttpClient, private router: Router private createAppsdata: IAppOption
3. Config App
- config App
main.ts
for load
; if environment.production mooaPlatform.mount'help'.then;
- setup app routing in
app.module.ts
;
- Add for handle URL Change in
app.component.ts
constructorprivate router: Router
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/app1
http://mooa.phodal.com/assets/help
- Generate Config File
mooa -g apps.txt
Examples:
Mooa Config
config in Host app's app.component.ts
this.mooa = new Mooa
mode: 'iframe'
use iframe as application container:
switchMode: 'coexist'
hidden application when inactive:
For Angular Lazyload Module
inline.bundle.js
will load script for /
path.
So, just copy *.chunk.js
files to dist/
, then deploy it.
API
registerApplicationByLink
exmples:
mooa.registerApplicationByLink'help', '/assets/help', mooaRouter.matchRoute'help';
registerApplication
mooa.registerApplicationconfig.name, config, mooaRouter.matchRouteconfig.prefix;
hybrid
if config.sourceType else
navigateTo Custom App
mooaPlatform.navigateTo;
License
Copyright (c) 2013-2014 Christopher Simpkins Copyright (c) 2017-2018 Robin Coma Delperier
© 2018 A Phodal Huang's Idea. This code is distributed under the MIT license. See LICENSE
in this directory.