一种基于制造技术

本发明专利技术涉及计算机技术领域，具体为一种基于

【技术实现步骤摘要】
一种基于angular框架实现微前端落地应用的方法


[0001]本专利技术涉及计算机
，具体为一种基于
angular
框架实现微前端落地应用的方法
。

技术介绍

[0002]大型
IT
公司都会拥有自己的控制台网站，控制台网站中往往都承载着大量的小型项目，为了确保各个项目统一连贯
。
[0003]现有技术中，开发中往往会将公共功能及公共页面布局等部分单独提炼出来整理成公共包，各个项目应用这些公共部分功能及布局，只需在各自的项目中引用公共包就能使用公共包中的功能及布局等功能
。
[0004]但是，随着开发的项目越来越多，公共包中引用的公共资源文件也随之增加，发包版本也变得越来越频繁，每次增发包后都需要通知各部门及各项目组开发人员更新公共包，频繁的通知开发人员升级公共包版本号会降低公共包的使用体验感，也给开发测试带来了不便
。

技术实现思路

[0005]本专利技术的目的在于提供一种基于
angular
框架实现微前端落地应用的方法，以解决上述
技术介绍
中提出的问题
。
[0006]为实现上述目的，本专利技术提供如下技术方案：一种基于
angular
框架实现微前端落地应用的方法，所述方法包括以下步骤：
[0007]搭建主应用基座；
[0008]封装主应用与子应该所需的服务及功能；
[0009]子应用启动上报
。
[0010]优选的，搭建主应用基座时，在基座中放入了登录页
、
菜单导航模块
、
头部导航模块
、
公共服务
、
公共数据及子应用挂载点
。
[0011]优选的，封装主应用与子应该所需的服务及功能具体包括：封装应用注册服务，应用加载，应用销毁机制；封装应用路由
、
封装共享全局服务以及应用间通信
。
[0012]优选的，封装应用注册服务，应用加载，应用销毁机制是实现微前端应用落地的基础和核心，提供静态资源动态加载功能
、
应用的注册及销毁功能；
[0013]应用注册服务包含：应用注册
、
取消注册
、
获取应用名称
、
获取预加载应用
、
获取应用，应用加载根据当前页面的
URL
找到对应的子应用，然后加载应用的静态资源，调用预定义好的启动函数直接启动应用，在
Angular
中就是启动根模块；
[0014]应用加载包含应用预加载是当前应用渲染完毕会预加载其他应用，并启动，但并不会显示在页面上；
[0015]销毁应用使用
appModuleRef.destroy()
功能进行销毁应用
。
[0016]优选的，封装应用路由时，当子应用路由切换时，同步主应用路由，同时同步其他
启动状态的子路由
、
主应用路由切换时，找到所有当前启动的子应用，使用
navigateByUrl
同步跳转
。
[0017]优选的，封装共享全局服务时，基于
window
封装全局应用
。
[0018]优选的，应用间通信时，自定义事件
CustomEvent
之上封装
GlobalEventDispatcher
对象，
GlobalEventDispatcher
对象中提供了数据传递
、
数据监听
、
取消监听事件，为数据传递应用及数据监听应用事件
。
[0019]优选的，子应用启动上报时，子应用通过封装的
defineApplication
来启动子应用的
AppModule
并上报到应用注册服务中，应用注册服务获取子应用上报的信息，从中获取
name
后加入到子应用信息列表中，主应用根据菜单跳转到子应用时，应用加载根据路由携带的信息与子应用信息列表中数组中的数据进行对比，找出相对应的子应用
name
，然后根据
name
获取对应的子应用组件，之后进行页面渲染
。
[0020]优选的，子应用在进行上报时需要将整个子应用通过
webpack5
的
module Federation
模块联邦
build
出对应的
manifest.json
文件，文件中携带应用的所有相关信息
。
[0021]与现有技术相比，本专利技术的有益效果是：
[0022]本专利技术提出的基于
angular
框架实现微前端落地应用的方法，使用简单技术实现复杂应用
、Web
应用程序更易于维护
、
节省人力
、
财力；实现各项目独立部署
、
团队自治；代码库应用简单
、
松耦合性高，通过界定清晰的应用边界来降低意外耦合的可能性从而避免模块间不合理的隐式耦合造成的复杂度上升
。
附图说明
[0023]图1为本专利技术方法流程图
。
具体实施方式
[0024]为了使本专利技术的目的
、
技术方案进行清楚
、
完整地描述，及优点更加清楚明白，以下结合附图对本专利技术实施例进行进一步详细说明
。
应当理解，此处所描述的具体实施例是本专利技术一部分实施例，而不是全部的实施例，仅仅用以解释本专利技术实施例，并不用于限定本专利技术实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围
。
[0025]请参阅图1，本专利技术提供一种技术方案：一种基于
angular
框架实现微前端落地应用的方法，所述方法包括以下步骤：
[0026]步骤一：搭建主应用基座
。
[0027]根据需求搭建
angular
框架主应用基座，搭建主应用基座前要明白主应用基座的主要作用是什么，主应用基座中需要存放哪些页面等，按照我们的需要，我们在基座中放入了登录页
、
菜单导航模块
、
头部导航模块
、
公共服务
、
公共数据及子应用挂载点等
。
[0028]步骤二：封装主应用与子应该所需的服务及功能
[0029]1、
封装应用注册服务，应用加载，应用销毁机制
[0030]这些是实现微前端应用落地的基础和核心，主要做的就是：提供静态资源动态加载功能
、
应用的注册及销毁等功能
。
其中应用注册服务需要包含：应用注册
、...

【技术保护点】

【技术特征摘要】
1.
一种基于
angular
框架实现微前端落地应用的方法，其特征在于：所述方法包括以下步骤：搭建主应用基座；封装主应用与子应该所需的服务及功能；子应用启动上报
。2.
根据权利要求1所述的一种基于
angular
框架实现微前端落地应用的方法，其特征在于：搭建主应用基座时，在基座中放入了登录页
、
菜单导航模块
、
头部导航模块
、
公共服务
、
公共数据及子应用挂载点
。3.
根据权利要求1所述的一种基于
angular
框架实现微前端落地应用的方法，其特征在于：封装主应用与子应该所需的服务及功能具体包括：封装应用注册服务，应用加载，应用销毁机制；封装应用路由
、
封装共享全局服务以及应用间通信
。4.
根据权利要求3所述的一种基于
angular
框架实现微前端落地应用的方法，其特征在于：封装应用注册服务，应用加载，应用销毁机制是实现微前端应用落地的基础和核心，提供静态资源动态加载功能
、
应用的注册及销毁功能；应用注册服务包含：应用注册
、
取消注册
、
获取应用名称
、
获取预加载应用
、
获取应用，应用加载根据当前页面的
URL
找到对应的子应用，然后加载应用的静态资源，调用预定义好的启动函数直接启动应用，在
Angular
中就是启动根模块；应用加载包含应用预加载是当前应用渲染完毕会预加载其他应用，并启动，但并不会显示在页面上；销毁应用使用
appModuleRef.destroy()
功能进行销毁应用
。5.
根据权利要求3所述的一种基于
angular
框架实现微前端落地应用的方法，其特征在于：封装应用路由时，当子应用路由切换时，同步主应用路由，同时同步其他启动状态的子路由
、

【专利技术属性】
技术研发人员：宋亚萍，于沈课，唐晓东，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：