- A+
所属分类：Web前端
qiankun angular12 single-spa-angular子应用的改造
参考资料：
- https://qiankun.umijs.org/zh/guide/tutorial#angular-%E5%BE%AE%E5%BA%94%E7%94%A8 （乾坤官网）；
- 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" ] 报路径错的时候修改这里
