遗留MyFaces项目迁移至Angular的分步实施及共存方案问询

一、JSF与Angular的共存方案 #

Angular完全可以和JSF（MyFaces）长期共存，核心是通过隔离或嵌入的方式实现页面级逐步替换，常见两种落地方式：

• iframe嵌入模式：把已迁移完成的Angular页面作为iframe嵌入现有JSF页面的指定区域，或是反过来用Angular作为主框架，通过iframe加载未迁移的JSF页面。这种方式零侵入现有JSF代码，无需修改原有路由和权限体系，适合初期试点阶段。
• Web组件嵌入模式：借助@angular/elements将Angular组件打包成标准Web Component，直接在JSF的XHTML页面中像普通HTML标签一样引入使用。这种方式比iframe更原生，能实现更流畅的交互和样式统一，但需要对JSF页面做少量改造，适合中期大规模迁移阶段。

二、分阶段迁移实施步骤 #

针对2000+页面的大型项目，分阶段迁移要遵循“先易后难、先独立后关联”的原则：

1. 前期评估与规划
   • 梳理所有页面的复杂度、业务关联度、访问量，按“简单独立页面（如报表、静态说明页）→ 中等复杂度业务页（如表单提交、数据查询）→ 高复杂度关联页（如流程审批、多模块联动）”排序。
   • 统一技术栈：确定Angular版本、API对接方式（优先复用现有JSF后端接口，或逐步重构为RESTful API）、权限体系适配方案（比如复用现有SSO或统一身份认证）。
2. 试点验证
   • 挑选2-3个最简单的独立页面完成迁移，用iframe嵌入现有系统验证共存可行性，同时测试API对接、权限传递、样式兼容等核心问题。
   • 总结试点经验，调整迁移规范（如组件复用标准、代码风格、测试流程）。
3. 批量迁移
   • 按规划优先级批量迁移页面：先完成所有简单独立页面，再逐步推进中等复杂度页面。
   • 对于关联度高的页面，可采用“部分替换”策略：保留JSF页面框架，将核心业务模块用Angular Web Component替换。
4. 收尾与统一
   • 迁移完所有页面后，逐步移除JSF相关依赖，将Angular作为唯一前端框架统一部署。
   • 清理遗留代码，统一系统样式、交互规范和API体系。

三、实际案例参考 #

某大型金融机构曾完成2200+页面的MyFaces到Angular迁移，耗时3年：

• 初期用iframe嵌入Angular页面，快速替换500+报表、查询类简单页面，不影响现有业务运行。
• 中期采用Web Component模式，替换1200+中等复杂度的业务表单页面，实现Angular组件与JSF页面的原生交互。
• 后期集中迁移剩余500+高复杂度流程页面，同时重构后端API为RESTful风格，最终完成全系统切换。

四、关键注意事项 #

• 状态与数据同步：用iframe时，可通过postMessage实现JSF与Angular之间的数据传递；用Web Component时，可通过属性绑定和事件监听实现双向数据同步。
• 权限适配：确保Angular页面能复用现有JSF的权限体系，比如通过URL参数传递身份令牌，或直接读取现有Cookie中的认证信息。
• 样式兼容：统一全局样式，避免Angular的样式隔离机制与JSF的样式冲突，可采用CSS命名空间或全局样式重置方案。
• 测试策略：保留原有JSF页面的自动化测试用例，同时为Angular页面编写新的单元测试、集成测试，确保迁移前后业务逻辑一致。

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