Inject Ember.Component dynamicly

dynamic-component.hbs

{{component componentName args=componentAttributes}}

dynamic-component.js

import Ember from 'ember';
import $ from 'jquery';
const { getOwner, computed } = Ember;

export default Ember.Component.extend({
  init() {
    this._super(...arguments);

    $.getScript('some-dynamic-component-to-inject.js')
      .then(() => {
        const component = window.newComponent(Ember);
        const container = getOwner(this);

        container.register('component:dynamic-injeted', component);

        Ember.run(() => {
          this.set('componentName', 'dynamic-injeted');
        });
      });
  },

  componentAttributes: computed(() => Object.create({})),
});

some-dynamic-component-to-inject.js

// Needs to be compiled with 'htmlbars-inline-precompile'
window.newComponent = function(Ember) {
  return Ember.Component.extend({
    layout: hbs`<h1>hi {{ args.name }}</h1>`
  });
};