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"
]

报路径错的时候修改这里