Ember CLI generate component in an addon

Question

I try to make an addon using ember-cli. Here it is step by step what I have done so far:

sudo ember addon test-addon
cd test-addon
sudo ember serve 

now the server runs and on localhost:4200 I can see the test/dummy app's application hbs.

Welcome to Ember.js

Its time to make some components for the addon:

sudo ember g component my-form

In the tests/dummy/app/templates/application.hbs I added {{my-form}}

And now I'm getting the following js error:

Uncaught Error: Could not find module test-addon/components/my-form imported from dummy/components/my-form

edit

After struggling a little bit with npm, I tried it again (without sudo) and the same thing happened. I'm on Ember CLI 0.2.1. Here are my files, but they should be the same since they are auto-generated. The error is thrown from bower-components/loader.js/loader.js line 110 .

addon/components/my-form.js

import Ember from 'ember';
import layout from '../templates/components/my-form';

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

addon/templates/components/my-form.hbs

{{yield}}

app/components/my-form.js

import myForm from 'test-addon/components/my-form';

export default myForm;

Answer 1

It looks like ( as of July 2015, anyway ) that the fact templates don't work in addons is partially by design. Philosophically, I guess the justification is that the styling should be app-specific, but the JS logic can be shared. Or it's just a bug/oversight.

It turns out that if you simply remove that layout line and the import layout, it will work.

So the result looks like:

<app-name>/app/templates/includes-a-shared-component.hbs :

What follows is my shared component! {{my-shared-component}}

<addon-name>/addon/components/my-shared-component.js :

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() { // simple hello-world-style function
    return 5;
  }.property()
});

<app-name>/app/templates/components/my-shared-component.hbs :

Hey look I'm the app-specific style for your component <marquee>Hello world</marquee>
Here's a value from a property: {{valueFromProperty}}

My versions: Ember: 1.13.1 node: 0.12.0 npm: 2.12.1

Answer 2

And here's a very different (and IMO better, but not perfect) answer than my earlier one.

<addon-name>addon/components/test-component.js :

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() {
    return 5;
  }.property(),

  layout:Ember.HTMLBars.compile("I'm the addon's layout {{valueFromProperty}}")
});

You will need to add the template compiler to your app:

<app-name>/app/ember-cli-build.js :

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });
  app.import('bower_components/ember/ember-template-compiler.js');
  ... other stuff...

Note that the layout property in the addon's component completely overrides your in-app template, so per-app customizing becomes more difficult. But if you want your template customizable, you could probably use my other answer where you don't specify layout at all and just let the resolver find the template in your app.

Answer 3

One more approach I've found that works and is different than my other answers.

Let's say you've done ember g component my-addon-component in your addon.

This will result in you having a component at: <addon-name>/addon/components/my-addon-component.js and a template at <addon-name>/addon/templates/my-addon-component.hbs (at least with my current ember-cli).
You'll also have a tiny component stub at <addon-name>/app/components/my-addon-component.js

The fix: 1. Move the component guts from <addon-name>/addon/components to <addon-name>/app/components (replacing the stub).
2. Move the template from <addon-name>/addon/templates/components to <addon-name/app/templates/components

After 1: The import layout from ../templates/components/my-addon-component will now have a different meaning: it'll be importing from the including-app's namespace instead of the addon's namespace.

After 2: The template's import location will be in the including-app's namespace. This also seems to mean it gets compiled by the app, so you won't throw the "addon templates were detected, but there are no template compilers registered"