微前端-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；

建立微應用容器

註冊微應用

啓動