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

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, getSingleSpaExtraProviders } 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();
}
// 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);
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<flink-root id="flinkid" />',
  Router,
  NgZone: NgZone
});

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

# 修改 angular.json

"projects"->"flink"->"architect"->"build"->"options"->"deployUrl":'/'

"projects"->"flink"->"architect"->"serve"->"options"->"deployUrl":'http://localhost:4200/'

端口可能不正确

# 修改 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 appName = require('./package.json').name;

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

  const singleSpaConfig = {
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    },
    output: {
      library: `${appName}-[name]`,
      libraryTarget: "umd",
    },
    externals: {
      "zone.js": "Zone",
    },
  };
  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"
]

报路径错的时候修改这里

 

# 修改 app-routing.module.ts

+ import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)],
  + providers: [{ provide: APP_BASE_HREF, useValue: (window as any).__POWERED_BY_QIANKUN__ ? '/flink/' : '/' }]
})

 

# 创建 public-path.js 文件

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}


在 main.single-spa.ts 最上面引入