背景

微前端框架乾坤的DEMO中沒有Angular例子，本人結(jié)合single-spa中Angular的相關(guān)教程，在乾坤中加入ng8。

項(xiàng)目地址

運(yùn)行

cd main-project

yarn install:all

yarn start

訪問 http://localhost:5100/

項(xiàng)目配置

主項(xiàng)目

參照main-project

子項(xiàng)目

1. angular項(xiàng)目配置

安裝依賴包

ng add single-spa-angular

添加打包配置文件

在子項(xiàng)目修改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 需要改為子項(xiàng)目的名稱

修改子項(xiàng)目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 };

2. react項(xiàng)目配置

參照官方DEMO

3. vue 項(xiàng)目配置

參照官方DEMO