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

基础环境

实践日期：2023-02-16

ng version

Angular CLI: 15.1.4
Node: 18.14.0
Package Manager: npm 9.3.1
OS: win32 x64

设置npm镜像源

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

主应用

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

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

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

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

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

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

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

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

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

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

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

@NgModule({ // 以下是新增内容
  providers: [{provide: APP_BASE_HREF, useValue: '/micro1'}],

启动应用

npm run serve:single-spa:micro1

访问

http://localhost:4200/

跳转主应用：http://localhost:4200/

跳转微应用：http://localhost:4200/micro1

链接

基于qiankun搭建angular15微前端项目入门实践_TodayCoding的博客-CSDN博客

代码

angular15 · master · TodayCoding / Qiankun study examples · GitCode

相关

基于qiankun搭建angular15 hash URL微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建ng-alain15微前端项目入门实践_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博客