angular MicroApp微服务改造

简单记录下项目微服务改造

基于MicroApp

https://jd-opensource.github.io/micro-app/

https://juejin.cn/post/7134232108070862878

首先是为什么要改成微服务

随着业务多了，前端代码也越来越多，需要拆分下，避免多个后端微服务强依赖对应一个前端

写一个公共函数micro-app.service.ts，里面来写microApp一些变量方法

javascript 复制代码

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import microApp from '@micro-zoe/micro-app';
@Injectable({
  providedIn: 'root',
})
export class MicroAppService {
  static microAppStart() {
    microApp.start({
     //
    });
  }

  subAppUrls = {
    url1: '/kang-url1',
    url2: '/kang-url2',
  };

  constructor(
    public router: Router,
  ) {}

  getSubAppUrl(name: string): string {
    const subAppUrl = this.subAppUrls[name];
    // 具体url逻辑
  }

  // 设置路由
  setBaseAppRouter() {
    microApp.router.setBaseAppRouter(this.router);
  }

 // 共享全局数据放这里
  setGlobalData() {
    microApp.setGlobalData({
      XXXInfoService: this.XXXInfoService,
    });
  }
}

在最外层的main.ts里面启动micro

javascript 复制代码

import { MicroAppService } from '@core/micro-app.service';

MicroAppService.microAppStart();

在最外层组件的app.component.ts里面注入micro

javascript 复制代码

import { MicroAppService } from '@core/micro-app.service';

 constructor(
    private microAppService: MicroAppService
  ) {
    this.microAppService.setBaseAppRouter();
    this.microAppService.setGlobalData();
  }

然后再写一个sub-app.component公共组件，用来加载子应用

javascript 复制代码

import { Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';
import { unmountApp, getAllApps } from '@micro-zoe/micro-app';

@Component({
  template: `
    <micro-app
      [attr.name]="name"
      [attr.url]="url"
      [attr.baseroute]="baseRoute"
      (mounted)="onSubAppMounted()"
      (error)="onSubAppMounted()"
    ></micro-app>
    <router-outlet></router-outlet>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  standalone: true,
  imports: [RouterOutlet],
})
export class SubAppComponent implements OnInit, OnDestroy {
	//具体方法不写了
}

最后就是其他组件的路由文件里面的修改了，component改成刚才的公共组件

javascript 复制代码

import { SubAppComponent } from '@layout/sub-app.component';
const routes: Routes = [
  {
    path: 'kang-url',
    component: SubAppComponent,
    data: {
      name: 'kang-url'
    },
  },
];

大致流程这样，具体细节太多了，不写了，就当是个思路参考下微服务的实现逻辑