主应用(基座)
registerMicroApps
export declare function registerMicroApps<T extends ObjectType>(apps: Array<RegistrableApp<T>>, lifeCycles?: FrameworkLifeCycles<T>): void;
在这个方法中为微应用注册信息
参数一 apps
在其中注册微应用的信息,主应用会在浏览器url发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子
参数二 lifeCycles
其中暴露了五个生命周期钩子
export declare type FrameworkLifeCycles<T extends ObjectType> = {
beforeLoad?: LifeCycleFn<T> | Array<LifeCycleFn<T>>;
beforeMount?: LifeCycleFn<T> | Array<LifeCycleFn<T>>;
afterMount?: LifeCycleFn<T> | Array<LifeCycleFn<T>>;
beforeUnmount?: LifeCycleFn<T> | Array<LifeCycleFn<T>>;
afterUnmount?: LifeCycleFn<T> | Array<LifeCycleFn<T>>;
};
可以在微应用的几个生命周期执行对应的操作 待确认
搭建流程
子应用
创建子项目
ng n xxx
ng add single-spa-angular
注意目前暂时还不支持angular11 当前新客服angular使用的版本都是9.1.12
安装依赖
npm i qiankun-ng-common -S`
npm i @angular-builders/custom-webpack@9.2.0 -D
要注意webpack的版本
angular 9
项目只能安装 9.x
版本,angular 10
项目可以安装最新版。
再安装一下缺失的依赖
npm i
删除empty-route文件夹,添加公共的空组件
app1/app-routing.module.ts
const routes: Routes = [
{
path: '**',
component: EmptyComponent
}
]
待确认 不确定子应用需要增加空组件路由
更改子项目根组件选择器
app.component.ts
@Component({
selector: 'app1-root', // 此处不能和基座项目的根组件选择器相同
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {}
index.html
<body>
<app1-root></app1-root>
</body>
启动项目
将基座项目启动端口改到7400,子项目启动端口改到7401后,运行下方命令分别启动基座项目和子项目。
- 启动基座项目
npm start
- 启动子项目
npm run serve:single-spa:app1