微前端micro-zoe

[caroundsky]

基座 Angular 5.x 子应用 vue3 + vite2，UMD模式

系统环境:

• micro-zoe: v1.0.0-beta.5

• angular:5.0.0

  ------- 子应用 -------

• vue:3.2.25

• vite:2.9.9

因为 Angular 5.x 的TS版本与micro的TS版本不兼容，在ng以ESM的模式引入micro，编译会报语法错误：

ng5.x的Ts版本即使在 tsconfig.json内配置 skipLibCheck 也无效，故采用umd的方式引入。

• 下载umd格式的js文件，放到项目的静态文件夹内，再入口文件index.html处手动引入
• typings.d.ts定义MicroApp对象
• 在入口文件main.js初始化

  
  // typings.d.ts
  interface Window {
  microApp: any
  }

// main.js const MicroApp = new window.microApp.MicroApp()

MicroApp.start()

* 在路由页面分别配置view model

```js
// xxx.html
<div id="invoice"></div>

// xxx.ts
ngAfterViewInit() {
  const { renderApp } = window.microApp

  renderApp({
    name: 'invoice',
    container: '#invoice',
    url,
    iframe: true, // 使用vite需要开启该设置
    'default-page': '/#/默认打开路由',
    'keep-alive': true // ng路由切换时，可以保留子应用状态
  })
}

• 路由切换页面 model，当关闭路由时，若该路由是微前端服务，则销毁

  // 销毁
  unmountApp(module: string) {
  const apps: Array<any> = window.microApp.getActiveApps() || []
  if (!apps.includes(module)) return
  setTimeout(() => {
  window.microApp.unmountApp(module, { destroy: true }) 
  }, 0);
  }

Tips：

1、micro 文档： https://micro-zoe.com/docs/1.x/#/