基于qiankun搭建angular15 hash URL微前端项目入门实践

TodayCoding

已于 2023-03-30 12:26:11 修改

阅读量234

点赞数

文章标签：前端 angular typescript npm node.js

于 2023-02-20 10:39:17 首次发布

本文链接：https://blog.csdn.net/mjnmjn000/article/details/129118575

版权

基础环境

实践日期：2023-02-20

ng version

Angular CLI: 15.1.6
Node: 18.14.1
Package Manager: npm 9.3.1
OS: win32 x64

Angular: 15.1.5

设置npm镜像源

npm config set registry https://registry.npmmirror.com/

主应用

创建项目，命名为main，启用路由，设置样式格式为css

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

ng new main --routing --style css
cd main
npm i qiankun -S

创建空路由组件：src/app/empty-route/empty-route.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'main-empty-route',
  template: '',
})
export class EmptyRouteComponent { }

设置路由：src/app/app-routing.module.ts

在根模块的 RouterModule.forRoot() 的第二个参数中传入一个带有 useHash: true 的对象

回到基于 HashLocationStrategy 的传统方式，改写了默认的路由策略（PathLocationStrategy）

import { EmptyRouteComponent } from './empty-route/empty-route.component';

const routes: Routes = [
  { path: 'micro1', component: EmptyRouteComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],

添加链接和容器：src/app/app.component.html

注意 routerLink="/micro1" 根据 HashLocationStrategy 路由策略渲染成 href="#/micro1"

<div class="content" role="main"><!-- 以下是新增内容 -->
  <a routerLink="/">跳转主应用</a>
  <a routerLink="/micro1">跳转微应用</a>
  <div id="container" style="width: 100%; height: 200px; margin: 16px 0; border: solid; overflow: auto;"></div>

注册微应用并启动：src/app/app.component.ts

注意 activeRule: '#/micro1'

import { registerMicroApps, start } from 'qiankun';

  title = 'main'; // 以下是新增内容
  constructor() {
    registerMicroApps([
      {
        name: 'micro1',
        entry: 'http://localhost:4201/',
        container: '#container',
        activeRule: '#/micro1',
      },
    ]);
    start();
  }

启动应用

npm start

微应用

创建项目，命名为micro1，启用路由，设置样式格式为css，设置选择器前缀为micro1

设置选择器前缀是必要的，否则会与主应用根标签（app-root）混淆，导致主应用异常

添加项目模板single-spa-angular，实践版本：single-spa-angular@8.0.1

过程中会出现3个问题，如下回答

安装依赖，以满足single-spa-angular的需要

ng new micro1 --routing --style css --prefix micro1
cd micro1
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

npm i

创建环境配置：src/environments/environment.ts

export const environment = {
    production: false,
};

设置基路径及路由策略：src/app/app-routing.module.ts

设置基路径是必要的，微应用的基路径不能是默认的根路径（/）且不能与其他微应用重复

在根模块的 RouterModule.forRoot() 的第二个参数中传入一个带有 useHash: true 的对象

回到基于 HashLocationStrategy 的传统方式，改写了默认的路由策略（PathLocationStrategy）

基路径 /micro1 根据 HashLocationStrategy 路由策略渲染成 #/micro1

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/micro1'}],
  imports: [RouterModule.forRoot(routes, { useHash: true })],

启动应用