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
- CLI for Create APP Module (TODO)
- CLI for Update APP Module (TODO)
Goal:
- 构建插件化的 Web 开发平台，满足业务快速变化及分布式多团队并行开发的需求
- 构建服务化的中间件，搭建高可用及高复用的前端微服务平台
- 支持前端的独立交付及部署
in Host and Child App
yarn add mooa- add get Apps logic in AppComponent (
app.component.ts)
constructor(private renderer: Renderer2, http: HttpClient, private router: Router) {
http.get<IAppOption[]>('/assets/apps.json')
.subscribe(
data => {
this.createApps(data);
},
err => console.log(err)
);
}
private createApps(data: IAppOption[]) {
data.map((config) => {
mooa.registerApplication(config.name, config, mooaRouter.hashPrefix(config.prefix));
});
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
mooa.reRouter(event);
}
});
return mooa.start();
}- config App
main.tsfor 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 {
}- comments
src/polyfills.ts
// import 'zone.js/dist/zone';- add copy zone.js to
assets/, modifyindex.html
<script src="/assets/zone.js"></script>- Add for handle URL Change in
app.componenet.ts
constructor(private router: Router) {
window.addEventListener('mooa.routing.change', (event: CustomEvent) => {
if (event.detail.app.name === 'app1') {
this.router.navigate([event.detail.url.replace('/app/app1/', '')]);
}
});
}
- 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:
[
{
"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"
]
}
]mooaPlatform.navigateTo({
appName: 'help',
router: 'home'
});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.