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

  • qiankun angular12 single-spa-angular子应用的改造已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

参考资料:1.主应用改造就不多说,主要涉及到zone.js 问题      在父应用引入 zone.js,需要在 import qiankun 之前引入。


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" ]  报路径错的时候修改这里