背景
微前端框架乾坤的DEMO中沒有Angular例子，本人結合single-spa中Angular的相關教程，在乾坤中加入ng8。
項目地址
運行
cd main-project
yarn install:all
yarn start
項目配置
主項目
參照main-project
子項目
1. angular項目配置
安裝依賴包
ng add single-spa-angular
添加打包配置文件
在子項目修改extra-webpack.config.js配置文件
const webpackMerge = require('webpack-merge');
module.exports = (config, options) => {
const singleSpaConfig = {
output: {
library: 'app-name',
libraryTarget: 'umd'
},
externals: {
'zone.js': 'Zone'
}
};
const mergedConfig = webpackMerge.smart(config, singleSpaConfig);
return mergedConfig;
};
注：app-name 需要改為子項目的名稱
修改子項目main.single-spa.ts
改為如下代碼
import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import singleSpaAngular from 'single-spa-angular';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';
if (environment.production) {
enableProdMode();
}
let bootstrap: any;
let mount: any;
let unmount: any;
if (!!(window as any).__POWERED_BY_QIANKUN__) {
const lifecycles = singleSpaAngular({
bootstrapFunction: singleSpaProps => {
singleSpaPropsSubject.next(singleSpaProps);
return platformBrowserDynamic().bootstrapModule(AppModule);
},
template: '<app-root />',
Router,
NgZone: NgZone,
});
bootstrap = lifecycles.bootstrap;
mount = lifecycles.mount;
unmount = lifecycles.unmount;
} else {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
}
export { bootstrap, mount, unmount };
