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;

I know, but if i don't do it, then i am getting permission failures. — user3568719
– user3568719, Commented Mar 26, 2015 at 15:19
Go to your ~/.npm folder and change ownership from root to your username and group. Then try ember commands without sudo. — kushdilip
– kushdilip, Commented Apr 22, 2015 at 3:15
@blessenm yes, but TBH I don't remember what was the issue. A simple reboot helped. I also recommend you to install Ember CLI without sudo. It avoids a lot of problems. — user3568719
– user3568719, Commented May 6, 2015 at 8:59

ArtHare · Accepted Answer · 2015-07-28 18:06:11Z

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

ArtHare · Accepted Answer · 2015-07-28 18:03:03Z

0

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.

edited Jul 28, 2015 at 18:03

answered Jul 28, 2015 at 14:43

ArtHare

1,85621 silver badges22 bronze badges

4 Comments

Kit Sunde Over a year ago

Your first answer is the convention, I'm not sure what the benefit of this version would be. You're not supposed to ship the template compiler to production and it would be rather rude of an addon to do so, and inlining the handlebars in the component breaks separation of concerns. See for instance: github.com/miguelcobain/ember-paper

ArtHare Over a year ago

I'm imagining some primarily-UI component whose layout doesn't have to change from app to app. It'd be fairly annoying to install an addon but then have to build your own .hbs (or manually add the recommended .hbs). Perhaps I'm in the wrong, but I'm imagining this addon like a self-contained library, and if someone wants to use a component from it, they just slap it down without worrying about further styling/configuration. Ideally it'd just have the template in addon/templates/components/my-component.hbs, but that seems banned.

Kit Sunde Over a year ago

You don't have to add anything, ember-cli takes care of it.

ArtHare Over a year ago

Ah, got it. It was not clear to me that <addon>/addon/components was a different scope than <addon>/app/components. In fact, in my answers, I meant app/templates or addon/templates as really meaning <app-name>/app/templates and <addon-name>/addon/templates.

ArtHare · Accepted Answer · 2015-07-30 16:22:20Z

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"

Collectives™ on Stack Overflow

Ember CLI generate component in an addon

edit

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

edit

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related