如何从Ember.js中引导Angular应用程序？

错误原因 #

Angular初始化时，DOM中不存在<app-root>元素，或是Ember的DOM渲染机制导致该元素未被Angular检测到。

解决步骤 #

• 确保<app-root>存在于Ember模板中
  直接在Ember的index.html里硬编码的<app-root>可能被Ember的渲染流程覆盖，建议将标签添加到Ember的路由模板（比如application.hbs）中，保证Ember渲染后该元素能出现在DOM里。

• 延迟Angular初始化时机
  等待Ember完成DOM渲染后再启动Angular，避免Angular先于DOM元素加载：

  1. 修改Angular打包后的初始化逻辑，监听DOM就绪事件：

     document.addEventListener('DOMContentLoaded', () => {
       if (document.querySelector('app-root')) {
         platformBrowserDynamic().bootstrapModule(AppModule);
       }
     });
     

  2. 或者借助Ember组件的生命周期钩子，在元素插入DOM后触发Angular引导：

     import Component from '@glimmer/component';
     import { scheduleOnce } from '@ember/runloop';
     
     export default class AngularWrapperComponent extends Component {
       didInsertElement() {
         super.didInsertElement();
         scheduleOnce('afterRender', this, () => {
           window.platformBrowserDynamic().bootstrapModule(window.AppModule);
         });
       }
     }
     

• 调整Angular脚本加载顺序
  将Angular的打包脚本移到<body>末尾，或添加defer属性，确保脚本执行时<app-root>已经存在于DOM中。

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