Angular微前端

提示：本文比较适用有[angular]基础的小白，大佬的话可以忽略应该提供不了什么参考价值；本文适用于angular 7以上的版本，为angular 提供一种较为简单但又可以应用于实际开发微前端实现方案。第一次写发布文章希望对大家有帮助

不同版本之间的Angular（依赖独立）基于ngx-planet架构实现微前端。

---

目录

系列文章目录 

前言

一、什么是portal、什么是子应用

二、使用步骤

1.配置portal 

1-1.主应用（portal）安装版本对应的依赖包 

1-2.主应用（portal）app.module.ts 引入NgxPlanetModule

 1-3主应用（portal）使用Planet服务

2.配置子应用

2-1.子应用安装angular版本对应的依赖包 

2-2.创建一个custom-webpack用的配置文件extra-webpack.config.js

2-3.子应用用添加一个路由输出用的组件（TenAppRouterOutLetComponent）以及关联配置：

2-4.子应用angular.json配置：

2-5 package.json

 2-6.子应用通过defineApplication定义如何启动子应用的AppModule, 同时可以设置PlanetPortalApplication服务为主应用的全局服务

2-7 启动测试

 3.portal 注册子应用

 3-1.portal app.component.ts 注册子应用

3-3.app-routing.module.ts 添加路由

4.总结 

5.报错处里 及注意事项

报错 An accessor cannot be declared in an ambient context.

---

前言

为了解决部门前端因随着功能的叠加导致前端工程的越发膨大；可维护性逐渐降低（例如到部署到k8s、run pipeline 时间越来越长，本地任意的改动dev-server重新呈现都越来越费时，不同团队都放置一个git仓库越发的乱，分支数倍增，升级难...）可谓是牵一发何止动全身的问题；最终实现将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，这些小块可以有独立的依赖，独立的样式，可以单独的升级，而在用户看来仍然是内聚的单个产品。

注：本文只教你如何快速基于ngx-planet快速搭建出Angular微前端，（不介绍 git cicd的配置，k8s的配置，sonarqube 配置.... 即自动化（自动部署）流程不做任何介绍）；其他的（例如：样式分离，样式按需应用）有空再补充。

 

angular-projects-webs · GitLab




一、什么是portal、什么是子应用

portal ：是所有子应用的入口，一般提供子应用的挂载，子应用的基底（公共）数据和（公共）serve。longin(即登录)、主页一般也放在实现。

子应用：就是功能模块，例如新开的专案。

二、使用步骤

1.配置portal 

angular8 新创建的项目v8-portal-web为例.

1-1.主应用（portal）安装版本对应的依赖包 

@angular/cdk

@worktile/planet

 npm install @angular/cdk@8 --save --force

npm install @worktile/planet@^1.2.4 --save --force