angular+qiankun+single-spa的微前端配置

一、主应用

1. 使用ng new qiankun-main创建主应用项目

ng new qiankun-main

2. 安装qiankun依赖

npm i qiankun

3. 创建微应用容器
在主应用的app.component.html中创建一个id为container（自定义）的div作为子应用的挂载容器

<div id="container"></div>

4. 注册微应用
在app.component.ts中

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
 /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 微应用的开服端口
   * container: 微应用挂载节点 - 需要跟之前创建的容器名一致
   * activeRule: 微应用触发的匹配规则 
   */
  {
    name: 'childOne',
    entry: '//localhost:5050',
    container: '#container',
    activeRule: '/child-one',
  },
]);
// 启动 qiankun
start();

在主应用创建一个空的组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-empty-route',
  template: '',
})
export class EmptyRouteComponent {}

在app-routing.module.ts中需要设置默认路由防止匹配不到主应用自己的路由时报错

const routes: Routes = [
  {
    path: '**',
    component: EmptyRouteComponent //任意主应用中的组件
  }
];

二、子应用

1.使用ng new qiankun-main创建主应用项目

ng new qiankun-child-one

2.下载single-spa依赖

npm i single-spa

3.下载打包配置依赖@angular-builders/custom-webpack
注意：angular 9 项目只能安装 9.x 版本，angular 10 项目可以安装最新版。

npm i @angular-builders/custom-webpack

4.添加single-spa-angular

ng add single-spa-angular

会出现三个选择
Would you like to proceed? (Y/n) Y
Does your application use Angular routing? (Y/n) Y
What port should your project run on? (4200) 5050(此处与主文件中注册子应用entry: '//localhost:5050’保持一致)
！执行之后项目会增加几个文件

5.在main.single-spa.ts文件中做修改
将环境相关的配置注释

6.在app-routing.module.ts文件中

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // @ts-ignore
  + providers: [{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/child-one' : '/' }]
})
此处的/child-one要与主应用配置一致

7.需要给子应用加唯一标识
如果不加会出现container即主应用中微应用容器container找不到的问题
在main.single-spa.ts中

template: '<app-root id="child_one"/>',

完整代码展示
const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root id="child_one"/>',
  Router,
  NavigationStart,
  NgZone,
});

在app.component.ts中

selector: '#child_one app-root',

完整代码展示
@Component({
  selector: '#child_one app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

8.为了能让子应用单独运行还要添加一下内容
如果不写 子应用不能单独运行，但可以在主应用中运行
在main.single-spa.ts中

import 'zone.js/dist/zone';

// 微应用单独启动时运行
if (!(window as any).__POWERED_BY_QIANKUN__) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}