如何在JBoss7.x/Struts非Angular遗留应用中嵌入Angular5内容

嘿，这个分步迁移的方案完全可行，我帮你整理了具体的实现步骤，适配你的JBoss+Struts遗留环境和Angular5的迁移需求：

一、先搞定独立Angular5应用的部署 #

• 先打包你的Angular5应用：在项目根目录运行 ng build --prod，这会生成优化后的生产环境包，输出在dist文件夹里。
• 部署方式选适合你的：
  • 如果你想放在同一个JBoss 7.x服务器上，直接把dist里的内容打包成WAR包，或者创建一个新的Web模块部署，设置好专属的上下文路径（比如/angular-content）。
  • 也可以部署到单独的Web服务器（比如Nginx），不过这种情况要注意后面的跨域问题。

二、修改遗留应用的IFrame配置 #

• 找到你原来动态设置iframe src的代码（大概率是Struts Action里的逻辑或者前端JS），把原来的HTML视图路径替换成Angular应用的访问地址就行，举个例子：

  // 原来的旧代码
  // document.getElementById('contentFrame').src = '/legacy-app/user-profile.action';
  // 改成指向Angular应用的路由地址
  document.getElementById('contentFrame').src = '/angular-content/user-profile';
  

• 优化iframe的基础属性：加上width="100%"、height="100%"、frameborder="0"，避免出现布局错位；如果需要自适应内容高度，可以结合后面的父子通信来实现。

三、解决跨域与父子页面通信（核心要点） #

如果Angular应用和遗留应用不在同一个域名/端口/上下文，会碰到跨域问题，而且父子页面（遗留应用是父，Angular是子）可能需要传递数据（比如用户信息）或者通知状态，这里给你两种场景的解决方案：

• 同源场景（同一个JBoss，不同上下文）：直接用HTML5的postMessage API就很方便：
  • 父页面（遗留应用）发送消息：

    const contentFrame = document.getElementById('contentFrame');
    // 发送用户信息给Angular子页面，最后一个参数指定同源范围，用'/'表示当前域名下的所有路径
    contentFrame.contentWindow.postMessage(
      { type: 'USER_SESSION', data: { userId: '1001', authToken: 'abcxxx123' } },
      '/'
    );
    

  • 子页面（Angular应用）接收消息：在Angular的根组件或者对应业务组件里添加监听：

    ngOnInit() {
      window.addEventListener('message', (event) => {
        // 一定要验证消息来源，防止恶意请求
        if (event.origin === window.location.origin) {
          if (event.data.type === 'USER_SESSION') {
            // 把用户信息存入Angular的服务，供后续接口调用使用
            this.authService.setCurrentUser(event.data.data);
          }
        }
      });
    }
    

• 跨域场景：
  1. 要是部署在不同服务器，先在JBoss里配置CORS过滤器：修改standalone.xml或domain.xml，添加允许遗留应用域名的CORS规则。
  2. 或者用反向代理，比如Nginx把两个应用映射到同一个域名的不同路径下，这样就不存在跨域问题了，比如yourdomain.com/legacy指向遗留应用，yourdomain.com/angular指向Angular应用。
• 自适应iframe高度：子页面加载完成后，把自身高度传给父页面，父页面动态调整iframe高度：
  • Angular组件里的代码：

    ngAfterViewInit() {
      // 获取页面实际高度
      const pageHeight = document.body.scrollHeight;
      // 发送高度给父页面，生产环境建议替换*为具体的父页面origin
      window.parent.postMessage({ type: 'UPDATE_FRAME_HEIGHT', data: pageHeight }, '*');
    }
    

  • 父页面的监听代码：

    window.addEventListener('message', (event) => {
      if (event.data.type === 'UPDATE_FRAME_HEIGHT') {
        document.getElementById('contentFrame').style.height = `${event.data.data}px`;
      }
    });
    

四、过渡阶段的兼容小技巧 #

• 可以做模块级的切换：遗留应用里根据业务模块判断，一部分用旧的HTML视图，一部分用新的Angular应用，比如：

  function loadContent(moduleName) {
    const frame = document.getElementById('contentFrame');
    if (['user-profile', 'order-manage'].includes(moduleName)) {
      // 新模块用Angular应用
      frame.src = `/angular-content/${moduleName}`;
    } else {
      // 旧模块继续用原来的视图
      frame.src = `/legacy-app/${moduleName}.action`;
    }
  }
  

• 统一会话状态：如果在同一个JBoss里，默认会话是共享的；如果是不同服务器，可以用JWT令牌，父页面把令牌传给子页面，子页面用令牌请求后端接口，保证用户状态一致。

五、部署后必测的几个点 #

• 检查iframe加载是否正常，浏览器控制台有没有跨域报错。
• 测试父子页面的通信是否正常，比如用户信息传递、高度自适应是否生效。
• 切换新旧模块，验证功能衔接是否流畅，有没有样式冲突。

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