qiankun angular12 single-spa-angular子應用的改造

參考資料：

1. https://qiankun.umijs.org/zh/guide/tutorial#angular-%E5%BE%AE%E5%BA%94%E7%94%A8    （乾坤官網）；
2. https://juejin.cn/post/6844904158085021704#heading-13  （掘金）；

1.主應用改造就不多說，主要涉及到zone.js 問題

      在父應用引入 zone.js，需要在 import qiankun 之前引入。

2.子應用改造

# 安裝 single-spa
npm i single-spa -S

# 添加 single-spa-angular
ng add single-spa-angular

運行命令時，根據自己的需求選擇配置即可

# 修改文件 main.single-spa.ts

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';

import { singleSpaAngular } from 'single-spa-angular';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

// 微應用單獨啟動時運行
if (!(window as any).__POWERED_BY_QIANKUN__) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic().bootstrapModule(AppModule);
  },
  template: '<flink-root id="desk" />',
  Router,
  NgZone
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

# 修改 angular.json

"projects"->"flink"->"architect"->"build"->"options"->"deployUrl"

埠可能不正確

# 修改 polyfills.ts

註釋掉zone.js

// import 'zone.js'; 

# 修改 index.html

head標簽添加

 <script src="https://unpkg.com/zone.js" ignore></script>

# 修改 extra-webpack.config.js

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
const {merge } = require("webpack-merge");

// const webpackMerge = require("webpack-merge");

module.exports = (config, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  const singleSpaConfig = {
    output: {
      // 微應用的包名，這裡與主應用中註冊的微應用名稱一致
      library: "AngularMicroApp",    //這裡要改成自己的應用名
      // 將你的 library 暴露為所有的模塊定義下都可運行的方式
      libraryTarget: "umd",
    },
  };

// const mergedConfig = webpackMerge.smart (
  //  singleSpaWebpackConfig,
 //   singleSpaConfig
 // );

  const mergedConfig = merge (
    singleSpaWebpackConfig,
    singleSpaConfig
  );
  return mergedConfig;

};

修改 package.json

+ "serve:single-spa:flink": "ng s --project flink --disable-host-check --port 4200 --live-reload false "

重要的是啟動埠要一致

# 修改 tsconfig.app.json

"files":[
"main.single-spa.ts"
]

報路徑錯的時候修改這裡