如何按模块迁移Ember Web应用至最新Angular并实现框架共存

路由隔离与挂载 #

• 给Angular模块分配独立路由前缀（比如/angular/**），在Ember里专门建一个路由处理这些路径，负责加载Angular的打包脚本并挂载到指定DOM节点。
• 示例Ember路由代码：

// Ember app/routes/angular.js
export default class AngularRoute extends Route {
  beforeModel(transition) {
    // 避免重复加载Angular脚本
    if (!window.angularBootstrapped) {
      const script = document.createElement('script');
      script.src = '/assets/angular/main.js';
      script.onload = () => {
        window.angularBootstrapped = true;
        // 把Angular挂载到页面上的#angular-root节点
        document.getElementById('angular-root').innerHTML = '';
        bootstrapApplication(AppComponent, {
          providers: [provideZoneChangeDetection({ eventCoalescing: true })]
        });
      };
      document.body.appendChild(script);
    }
    transition.abort();
  }
}

构建产物整合 #

• 配置Angular的构建输出路径，直接把打包好的文件放到Ember项目的public/assets/angular目录下，这样Ember的构建工具会自动把这些资源包含到最终部署包中。
• 示例Angular构建配置：

// angular.json
{
  "projects": {
    "your-angular-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "../ember-app/public/assets/angular",
            "baseHref": "/assets/angular/"
          }
        }
      }
    }
  }
}

跨框架组件通信 #

• 用全局事件总线传数据：直接借助window对象的自定义事件，Ember和Angular互相监听触发。
  • Ember组件发数据：

  // Ember组件内
  sendDataToAngular(data) {
    window.dispatchEvent(new CustomEvent('ember-data-update', { detail: data }));
  }
  

  • Angular组件收数据：

  // Angular组件内
  ngOnInit() {
    window.addEventListener('ember-data-update', (event) => {
      const data = (event as CustomEvent).detail;
      // 这里处理拿到的数据
    });
  }
  

• 简单数据也可以通过DOM节点的dataset属性传递，比如在共享的DOM元素上存值，两边直接读取。

全局状态共享（可选） #

• 如果需要共用全局状态，直接用localStorage或sessionStorage存非敏感数据，两个框架都读写这个存储就行。
• 要是状态复杂，也可以引入独立的Redux实例，让Ember和Angular共用同一个store，确保状态同步。

逐步迁移节奏 #

• 先迁独立模块：从依赖少、业务独立的模块（比如用户设置页）开始，跑通共存流程后再碰核心业务模块。
• 逐步替换路由：Angular模块开发完，就修改Ember的路由配置，把原Ember路由的路径指向Angular，慢慢缩减Ember的代码量。
• 及时清理旧代码：每迁完一个模块，就删掉对应的Ember组件、路由和服务，别留冗余代码占地方。

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