Ember components in subdirectory

Question

I've read that having directories/folders inside of /components is now supported. Using ember-cli I can generate the necessary subdirectory/component required. However, I cannot seem to reference the component.

For example if I a folder structure like this:

app/components/sub/test-comp.js
app/templates/components/sub/test-comp.hbs

referencing by: (in another .hbs file)

{{test-comp model=model}}

gives me the following error:

A helper named 'test-comp' could not be found

ember: 1.10.0
ember-cli: 0.2.0

Answer 1

You need to use the full path to the component:

{{sub/test-comp model=model}}

---

EDIT: In reference to the issue Leo is having, it turns out it's a generator problem. The component generator creates something like this:

import Ember from 'ember';
import layout from '../templates/components/sub/foo-bar';

export default Ember.Component.extend({
  layout: layout
});

As far as I'm aware, there's no reason to import the layout like that. Unless something big has changed, component layouts are discovered automatically (if you're using the default naming conventions). I don't know why it does this (could be a bug), but you can fix it by removing the import like this:

import Ember from 'ember';

export default Ember.Component.extend({

});

---

EDIT 2: It looks like this is a known issue. I still don't know why importing the layout manually is necessary, as the component should work just fine without it.