Injection within app initializer in Ember-CLI?

Question

In old school Ember, I had an initializer that injected application controller into a component:

Ember.Application.initializer({
    name: "TopBreadcrumbs",
        initialize: function(container, application) {
        application.register("component:top-breadcrumbs", App.TopBreadcrumbsComponent);
        application.inject("component:top-breadcrumbs", "router", "router:main");
        return application.inject("component:top-breadcrumbs", "applicationController", "controller:application");
    }
});

Converting this initializer to Ember-CLI and therefore ES6 modules, I have this:

// initializers/top-breadcrumbs.js
export default {
    name: "top-breadcrumbs",
        initialize: function(container, application) {
        application.register("component:top-breadcrumbs", App.TopBreadcrumbsComponent);
        application.inject("component:top-breadcrumbs", "router", "router:main");
        return application.inject("component:top-breadcrumbs", "applicationController", "controller:application");
    }
};

The issue is: How do I make that reference to the AppTopBreadcrumbsComponents in this new format? App does not exist anymore, and that component is no longer a global like before... it is a es6 module like everything else.

How do I reference that in Ember-CLI?

Thanks!

Answer 1

App in vanilla Ember is the same as application received in:

initialize: function(container, application) {

And, to access components from your app, you set the initializer to be loaded after the app objects are ready with:

after: 'registerComponents'

Then you can look them up with:

var TopBreadcrumbsComponent = container.lookup('component:top-breadcrumbs');

So:

export default {
  name: "top-breadcrumbs",
  after: 'registerComponents',
  initialize: function(container, application) {
    var TopBreadcrumbsComponent = container.lookup('component:top-breadcrumbs');
  }
};