ember.jsember-cliember-cli-addons

How do you import a newly created ember addon?


I'm trying to create my first Ember AddOn and I'm getting stuck importing it into an Ember project. I've created the addon and published to github like this:

ember-cli$ ember addon test-addon
ember-cli$ cd test-addon
ember-cli/test-addon$ git remote add origin <github-url>

Then, from my project, I install the addon:

test-app$ ember install <github-url>

And, lastly, try to import it into a route:

# app/rotues/index.coffee
import TestAddon from 'test-addon'

But, I'm getting this error on the console:

Uncaught Error: Could not find module `test-addon` imported from `test-app/routes/index`

Any ideas where I'm going wrong? I can see the addon in the node_modules directory but not in bower_components. I think(tm) this is my issue but I'm not sure what else I need to do to setup my addon.


Solution

  • tl;dr

    cd my-addon
    npm link
    cd /my/project/dir
    npm link my-addon
    ember g my-addon  # run default blueprint
    

    Then add "my-addon": "*" to the devDependencies section of your app's package.json and restart the ember-cli app server.

    Longer Answer

    The easiest way to include a locally-developed addon is to use NPM's link

    First run npm link from the root of your addon project to register it with npm. Then running npm link <your-addon-name> will have the same effect as npm installing it.

    You'll still need to manually add it to your package.json (required for ember-cli to find it when compiling your app) and run the default blueprint (if your addon has one).

    If this doesn't seem to be working, check that you've created a package.json in your addon with "ember-addon" in the keywords list (the default ember-cli addon blueprint should do this for you).