基于qiankun搭建ng-alain15微前端项目入门实践
基础环境
实践日期：2023-02-22
ng version
Angular CLI: 15.1.6
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64设置npm镜像源
npm config set registry https://registry.npmmirror.com/安装yarn并设置yarn镜像源，实践版本：[email protected]
npm i -g yarn
yarn config set registry https://registry.npmmirror.com/
yarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass/
yarn config set canvas_binary_host_mirror https://npmmirror.com/mirrors/canvas/主应用
创建项目，命名为main，设置样式格式为css，启用路由，设置包管理器为yarn
添加项目模板ng-alain，实践版本：[email protected]，过程中ng-alain的询问全部采用默认选择
安装qiankun，实践版本：[email protected]
ng new main --style less --routing --package-manager yarn
cd main
ng add ng-alain
yarn add qiankun创建微服务容器组件：src/app/routes/qiankun-container/qiankun-container.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'qiankun-container',
template: '',
})
export class QiankunContainerComponent implements OnInit {
containerId = 'default';
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.containerId = this.route.snapshot.data?.['containerId'];
}
}设置路由：src/app/routes/routes-routing.module.ts
import { QiankunContainerComponent } from './qiankun-container/qiankun-container.component';
canActivate: [startPageGuard, SimpleGuard],
children: [ // 以下是新增内容
{ path: 'micro1', component: QiankunContainerComponent, data: { containerId: 'micro1' } },设置菜单：src/app/core/startup/startup.service.ts
children: [ // 以下是新增内容
{
text: 'Micro1',
link: '/micro1',
icon: { type: 'icon', value: 'appstore' }
},注册微应用并启动：src/app/app.component.ts
import { registerMicroApps, start } from 'qiankun';
constructor(
el: ElementRef,
renderer: Renderer2,
private router: Router,
private titleSrv: TitleService,
private modalSrv: NzModalService
) { // 以下是新增内容
registerMicroApps([
{
name: 'micro1',
entry: 'http://localhost:4201/',
container: '#qiankun-container-micro1',
activeRule: '#/micro1',
},
]);
start();启动应用
yarn start微应用
创建项目，命名为micro1，设置样式格式为css，启用路由，设置包管理器为yarn，设置选择器前缀为micro1
设置选择器前缀是必要的，否则会与主应用根标签（app-root）混淆，导致主应用异常
添加项目模板ng-alain，实践版本：[email protected]
过程中ng-alain的询问全部采用默认选择
ng new micro1 --style less --routing --package-manager yarn --prefix micro1
cd micro1
ng add ng-alain将ng-alain项目模板中的app-root替换成micro1-root，共3处
src/app/app.component.ts
src/assets/style.compact.css
src/assets/style.dark.css添加项目模板single-spa-angular，实践版本：[email protected]
过程中会出现3个问题，如下回答
安装依赖，以满足single-spa-angular的需要
ng add single-spa-angular
Would you like to proceed? (Y/n) Y
Does your application use Angular routing? (Y/n) Y
What port should your project run on? (4200) 4201
yarn install移除预加载（preloader）层：src/index.html
微应用在主应用中启动时，会出现预加载层遮罩整个窗口，但是微应用启动完成后，预加载层不消失
预加载组件功能使用类选择器document.querySelector(".preloader")定位预加载层
微应用能定位到主应用的预加载层，却不能定位到自己的预加载层，无法控制其消失
设置路由：src/app/routes/routes-routing.module.ts
不包裹基础布局组件LayoutBasicComponent，主应用负责控制布局
const routes: Routes = [ // 以下是新增内容
{ path: 'micro1', component: DashboardComponent },设置菜单：src/app/core/startup/startup.service.ts
children: [ // 以下是新增内容
{
text: 'Micro1',
link: '/micro1',
icon: { type: 'icon', value: 'appstore' }
},启动应用
yarn run serve:single-spa:micro1访问
http://localhost:4200/
跳转微应用：http://localhost:4200/#/micro1
链接
基于qiankun搭建ng-alain15微前端项目入门实践_TodayCoding的博客-CSDN博客
代码
ng-alain15 · master · TodayCoding / Qiankun study examples · GitCode
相关
基于qiankun搭建angular15微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建angular15 hash URL微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建ng-alain15微前端项目示例实践_TodayCoding的博客-CSDN博客
基于qiankun搭建vue3 webpack ts微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建vue3 webpack ts无懒加载微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建element plus webpack微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建react18微前端项目入门实践_TodayCoding的博客-CSDN博客