@zijin/messi

messi：微应用通信类库（该类库是实现前端微应用化的核心）

页面跳转流程

1. 捕捉当前URL变化 以/app/items/module1/page1为例
1. 判断当前URL是否指向app(url的前缀是否为/app/)
1. 获取appName:items,appPath:/module1/page1
1. 根据appName获得applicationAgent实例。applicationAgent管理实际的Application
1. 调用applicationAgent.navigateByURL('/module1/page1'),打开指定的页面

基于angular的AppManagerComponent管理着所有的Application

主应用master初始化

import { HttpClient } from '@angular/common/http';
import { Injectable, NgZone } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { Observable, Subject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { IMaster, messiMasterBuilder } from '@zijin/messi';
import { SessionService } from '@core/session.service';

@Injectable({
  providedIn: 'root',
})
export class MessiService {
  private readonly _master: Promise<IMaster> = null;
  private _appNameList: Array<string> = [];
  private _subAppUrlSubject = new Subject<string>();

  // 初始化messiMaster对象，全局唯一。
  constructor(
    private _http: HttpClient,
    private _ngZone: NgZone,
    private _message: NzMessageService,
    private _session: SessionService,
  ) {
    this._master = new Promise<IMaster>(resolve => {
      // 加载配置文件
      this._http.get('assets/apps.json')
        .subscribe((appConfigArray: any) => {
          appConfigArray.forEach(appConfig => {
            this._appNameList.push(appConfig.name);
          });

          resolve(this._buildAndInitMaster(appConfigArray));
        });
    });
  }

  set subAppUrl(url) {
    this._subAppUrlSubject.next(url);
  }

  get subAppUrl$(): Observable<string> {
    return this._subAppUrlSubject
      .asObservable()
      .pipe(filter((url) => !!url));
  }

  get master(): Promise<IMaster> {
    return this._master;
  }

  changeTheme(theme: string) {
    this._master.then((master) => {
      this._appNameList.forEach(subAppName => {
        master.triggerEventInApp(subAppName, 'changeTheme', theme);
      });
    });
  }

  /**
   * 创建并初始化主应用（master）
   * @param appConfigArray
   * @private
   */
  private _buildAndInitMaster(appConfigArray: Array<any>) {
    let master = messiMasterBuilder({
      parentElement: '#messiContainer',
      preload: false, // 是否预加载子应用
      preloadSize: 2, // 预加载子应用的数量
    }, appConfigArray);

    // 注册getToken方法，以便子应用调用从而获取登录信息等
    master.registerMethod('getToken', () => {
      return this._session.userInfo;
    });

    // 注册gotoLogin方法，在子应用token失效时跳转到主应用login页面
    master.registerMethod('gotoLogin', () => {
      this._session.logout();
    });

    // token过期，跳转到404页面
    master.registerMethod('tokenTimeout', () => {
      this._ngZone.run(() => {
        this._message.error('登录信息失效，请重新登录');
        this._session.gotoException();
      });
    });

    return master;
  }
}

子应用

        // Set the name of the subApplication(*)
        messiConfig.name = 'insight';
        // Set output level of log(默认值为debug，将产生较多日志输出)
        messiConfig.level = CONSOLE_LEVEL.DEBUG;
        window.addEventListener(MESSI_EVENT.ROUTING_NAVIGATE,
            (event: CustomEvent) => {
                if (event.detail && event.detail.url) {
                    this.router.navigateByUrl(event.detail.url);
                }
            });
        window.addEventListener('closeReuseTabByUrl', (event: CustomEvent) => {
            console.log(event.detail);
            AppReuseStrategy.deleteRouteSnapshot(event.detail);

        });

        window.addEventListener('changeTheme', (event: CustomEvent) => {
            this.theme.setTheme(event.detail);
            this.settings.setLayout('theme', event.detail);
        });

        messiApplication.getToken()
            .then((token) => {
                console.log('The device management system gets token from master application!', token);
                this.session.token = token;
            }, error => {
                console.error('error:' + error);
            });

        // Notifies the master application that the current sub-application load is complete!
        messiApplication.updateStatus(APP_STATUS.LOADED);