Angular Micro Front-End组件跨应用更新与PWA、Ionic适配问题咨询

问题1：通用组件更新无需逐个重新部署宿主应用 #

你提到的逐应用拉代码部署的情况，只针对把组件代码直接打包进宿主应用构建产物的场景，有两个完全符合微前端规范的方案可以规避该问题：

• 运行时远程加载方案
  把Google Maps这类通用公共组件打包为独立的微前端构件，部署到统一的静态资源CDN，所有宿主应用不在构建阶段引入组件代码，而是在运行时动态拉取CDN上的组件资源。更新组件时只需要重新部署该组件的CDN资源，所有宿主应用下次加载时自动拿到最新版本，完全不需要修改宿主代码或重新部署宿主。
  最常用的落地实现是Webpack原生支持的Module Federation（模块联邦），你可以将公共组件作为remote模块暴露，各个宿主作为host直接远程引入，还可以灵活配置版本规则、依赖共享逻辑，避免重复加载依赖。如果是使用qiankun、Single-spa这类微前端框架，也可以将公共组件注册为全局parcel组件实现复用，同样支持独立更新。
• 自动CI同步方案
  如果你团队习惯将公共组件作为私有NPM包引入，可以配置NPM包语义化版本规则，同时给所有用到该组件的宿主应用配置CI触发规则：监听到对应NPM包发布新版本后，自动拉取最新版本代码、执行构建部署，全程无需人工介入操作。

问题2：PWA微前端及Angular兼容Ionic已有成熟落地方案 #

• PWA与微前端适配方案
  目前微前端体系完全可以支持PWA能力，不需要依赖框架原生的集成支持。你可以给每个微应用/公共组件单独配置PWA相关的Service Worker、manifest资源，主应用侧做Service Worker的路由分发，将不同微应用的请求交由对应微应用自己的Service Worker实例处理即可，不会出现资源冲突。基于Angular开发的微应用可以正常使用@angular/pwa包配置自身的PWA逻辑，和是否嵌入微前端体系无关。
• Angular兼容Ionic原生元素方案
  Ionic组件本质是标准化的Web Components，Angular原生支持自定义元素的渲染，只需要在Angular项目的app.module.ts中，将CUSTOM_ELEMENTS_SCHEMA加入到@NgModule的schemas配置数组中，就可以直接在Angular模板中正常使用Ionic的各类原生标签，不会报未知组件错误。如果你需要将Ionic相关的功能封装为通用微前端组件，还可以通过@angular/elements工具包把组件打包为标准Web Components，不管宿主是什么技术栈都可以直接调用，同时保留Ionic的原生能力和PWA支持。

内容的提问来源于stack exchange，提问作者Kruger