qiankun微前端 angular基座
主应用（基座）
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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！