微前端-angular+qiankun+single-spa（一）

引言

你们好~

本文是基于 qiankun + single-spa 的微前端最佳实践系列文章之 从 0 到 1 篇，本文将分享如何使用 qiankun + single-spa 如何搭建主应用基座，而后接入不一样技术栈的微应用，完成微前端架构的从 0 到 1。

本教程采用 Angular 做为主应用基座，接入不一样的子Angular项目。

为何须要微前端（Micro Front-end）

1. 系统模块增多，单体应用变得臃肿，开发效率低下，构建速度变慢；
2. 人员扩大，须要多个前端团队独立开发，独立部署，若是都在一个仓储中开发会带来一些列问题；
3. 解决遗留系统，新模块须要使用最新的框架和技术，旧系统还继续使用。

构建Angular主应用基座

咱们先使用 Angular-cli 生成一个 Angular 的项目，初始化主应用。

ng new mango-pro --skipTests=true  --style=less --prefix=mango
复制代码

--style=less 用于样式文件的文件扩展名或预处理器。

--skipTests=true 若是为true，则不会为新项目生成"spec.ts"测试文件。

--prefix mango 适用于初始项目的生成选择器的前缀。

在主应用中安装 qiankun

npm i qiankun -S
复制代码

将普通的项目改形成 qiankun 主应用基座，须要进行三步操做：

• 建立微应用容器 - 用于承载微应用，渲染显示微应用
• 注册微应用 - 设置微应用激活条件，微应用地址等等；
• 启动 qiankun；

建立微应用容器

注册微应用

启动