基于qiankun搭建ng-alain15微前端项目入门实践

葛越

2023-12-01

基础环境

实践日期：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镜像源，实践版本：yarn@1.22.19

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，实践版本：ng-alain@15.1.0，过程中ng-alain的询问全部采用默认选择

安装qiankun，实践版本：qiankun@2.10.0

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: '<div id="qiankun-container-{{containerId}}"></div>',
})
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，实践版本：ng-alain@15.1.0

过程中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，实践版本：single-spa-angular@8.0.1

过程中会出现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")定位预加载层

微应用能定位到主应用的预加载层，却不能定位到自己的预加载层，无法控制其消失

  <micro1-root></micro1-root>
  <!-- <div class="preloader"><div class="cs-loader"><div class="cs-loader-inner"><label>	●</label><label>	●</label><label>	●</label><label>	●</label><label>	●</label><label>	●</label></div></div></div> -->

设置路由：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' }
          },

启动应用