qiankun微前端 angular基座

最新推荐文章于 2024-05-07 18:05:18 发布

zhouzipeng_cqu

最新推荐文章于 2024-05-07 18:05:18 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端框架 angular

本文链接：https://blog.csdn.net/qq_36996785/article/details/121519514

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

主应用（基座）

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

zhouzipeng_cqu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
qiankun微前端 angular基座

主应用（基座）registerMicroAppsexport declare function registerMicroApps<T extends ObjectType>(apps: Array<RegistrableApp<T>>, lifeCycles?: FrameworkLifeCycles<T>): void;在这个方法中为微应用注册信息参数一 apps在其中注册微应用的信息，主应用会在浏览器url发生变化，便会自动触发 qianku
复制链接

扫一扫