两个整合后的Angular应用独立部署问题解决方案求助
Angular多应用独立CI/CD部署TS2307报错修复方案
报错根因:本地调试时主应用、子应用源码在同一monorepo目录下,TS可正常解析projects/下的子应用路径;线上Jenkins构建主应用时,子应用存放在独立仓库,当前构建环境不存在对应子应用源码,因此抛出Cannot find module错误。
可行修复方案
- 方案1:改为运行时动态加载子应用构建产物
放弃直接在主应用源码中import子应用源码的方式,子应用单独构建为可独立运行的静态资源(可打包为Angular元素/UMD格式包),构建完成后上传到统一静态资源CDN或服务器。主应用中编写动态加载逻辑,运行时拉取子应用的js、css资源加载即可,完全不需要在编译阶段依赖子应用源码。 - 方案2:使用Module Federation微前端架构改造
这是Angular生态下多独立应用整合部署的官方推荐方案,主、子应用分别配置ModuleFederationPlugin,子应用暴露需要共享的模块、组件,主应用通过子应用的远程入口地址运行时加载对应模块。两者完全独立构建、独立部署,编译阶段不存在代码依赖,从根本上解决编译时找不到模块的问题,也能保留独立CI/CD的能力。 - 方案3:Jenkins构建前拉取子应用源码
如果暂时不调整现有代码架构,可以在主应用的Jenkins流水线中新增步骤:构建ng build执行前,将子应用独立仓库的对应版本代码clone到主应用的projects/xyz目录下,再执行编译操作。需要额外做好主、子应用的版本对应管理,可通过配置分支名、tag号的方式指定要拉取的子应用版本,避免出现兼容性问题。 - 方案4:子应用发布为私有npm包
子应用的可复用模块单独打包,每次走CI/CD流水线时自动发布到公司内部私有npm仓库,主应用将子应用作为npm依赖安装,编译时直接从node_modules中加载对应模块,不需要依赖子应用的源码仓库。子应用发版后主应用可按需升级依赖版本,两者的CI/CD流水线完全独立不受影响。
内容的提问来源于stack exchange,提问作者Yogesh
相关产品推荐
相关产品推荐

