Can I use local components

Ember CLI
1

I am trying to figure out how to use local components. My motivation is that our app source is already pretty large, and our components/ folder is pretty cluttered. I want to create a component that will only be used in a single route.

I have tried to read up on the various posts, but nothing seems to work. I have created the component as such:

details/
    route.js
    controller.js
    template.hbs
    components/my-component/
        component.js
        template.hbs

However, the component is not found. Digging through the source of the resolver and ember, there seems to be a need for a method called expandLocalLookup, and I see that it’s defined within ember-resolver under mu-trees, but I am not sure how that gets included.

This posts indicates that it should be possible (1 year old):

https://madhatted.com/2017/7/12/embercamp-module-unification-update

There is also some blueprint in ember-cli: https://github.com/ember-cli/ember-cli/tree/v3.1.4/blueprints/module-unification-app

But the blueprint mentioned in the blog post doesn’t work and I don’t know how to use the module-unification-app blueprint.

Is there any way for me to get the above component to work in Ember 3.1.4 using ember-resolver 4.5.0?

2

We do this by using the full component path.

{{details/components/my-component}}

It’s not as nice as having relative components, but it allows us to keep our components/ folder less cluttered. In fact, the only components that exist in app/components/ are global components. All other components we have nested within pods.

3 Likes