How can I display a list components in my Ember.js application?

Question

My Ember.js has many components that the end-user can use to compose a page. How can I display a dynamic list of the components that exist in my Ember Application?

I imagine the registered components is somewhere in the Ember.Application object, but I'm having a hard time finding something I can use.

Answer 1

# in the route
import computed from 'ember-computed';
import getOwner from 'ember-owner/get';

...
{
  components: computed(function () {
    return getOwner(this).lookup('container-debug-adapter:main')
      .catalogEntriesByType('component')
      .filter(componentName => componentName.includes('composables'))
  })
}