Include bower component in Ember Addon

Question

How do you need to work in an Ember addon, to include bower packages while installing the addon.

1) I installed the bower package I want to include in my addon with bower instal packagename --save

2) then in my addon, in the root, edited index.js, to look like this:

/* jshint node: true */
'use strict';

module.exports = {
  name: 'my-ember-component',
  included: function(app) {
    this._super.included(app);

    if(app.import){
      app.import(app.bowerDirectory + '/path-to-package/package.js');
    }
  }
};

However, when I try to start my application where the addon is installed, I get a ENOENT: no such file or directory, stat '/my-ember-application/tmp/source_map_concat-input_base_path-bWTPoVC9.tmp/0/bower_components/path-to-package/package.js

I want to avoid having to manually add the bower dependency to every application I install my addon in.

Note: I am using npm link to debug my addon, perhaps this could be a source of the problem?

I believe this is an artifact of local development like you say — Dhaulagiri, Mar 01 '16 at 15:07

Casey · Accepted Answer · 2016-03-01T17:09:31.323

Normally the addon's bower componenets are added to the consuming project during ember install addon.

But since you're doing local development and using npm link. You need to simulate this. You can do this with:

ember generate your-addon-name

Explanation.

Check out the docs on default blueprints in the ember cli docs.

A blueprint with the same name as the addon (unless explicitly changed, see above) will be automatically run after install (in development, it must be manually run after linking). This is where you can tie your addon’s bower dependencies into the client app so that they actually get installed.

In short, you need to create a default blueprint for your app and add the bower dependency there.

Create your file:

//blueprints/your-addon-name/index.js
module.exports = {
  normalizeEntityName: function() {}, // no-op since we're just adding dependencies

  afterInstall: function() {
    return this.addBowerPackageToProject('BOWER PACKAGE NAME'); // is a promise
  }
};

Then when you run the default blueprint with

ember generate your-addon-name

In the mean time, I found a solution, but couldn't add it to my own question just yet. You are on the right track. I didn't add my bower package to my project in my blueprint. And what you are saying is that the blueprint isn't automatically run on local development, and you need to run it manually. Please add it to your answer, and i'll mark as correct. — pjcarly, Mar 01 '16 at 16:47
Indeed, I didn't catch the first time that you didn't have a default blueprint. Added the info and link to the ember cli docs! — Casey, Mar 01 '16 at 17:09

Include bower component in Ember Addon

1 Answers1