How do you import a newly created ember addon? - ember.js

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.

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).

Related

How to create a ember version specific project?

When i use,
ember new projname
project is getting created with 2.7.0 ember version. I want to create a older version ember project. What i should use? [i checked options that can be used with new command, but none helps for this.]
Here's what I ended up doing:
create a new directory for my project and cd inside of it
npm init (enter through some bogus details, doesn't matter, we're going to erase soon)
npm install --save-dev ember-cli#desired.version
delete package.json and package-lock.json
ember new app
This got me a node_modules folder with the desired version of ember, and then also allowed me to use the ember cli to generate a project. It will create a folder with the name of the app, of course, and you can safely delete the node_modules folder in the app's parent directory.
This feels like a little bit of a round-about way of doing things, but it worked, and it seemed easier than trying to mess with my global versions.
Hope this helps someone out!
Ember new will create project at the most current version installed on your system.
There are 2 ways around this.
Install an older version of ember-cli globally for the desired version. The benefit would be that you create a new app at the desired version from the get go:
(change #2.11.0 to the desired version from https://github.com/emberjs/ember.js/releases)
npm uninstall -g ember-cli
npm cache clean
npm install -g ember-cli#2.11.0
Keep the current ember-cli version and then downgrade by changing the ember value in package.json :
(this will work for small version changes, not major changes)
you will need to re init your ember app (change 2.11.0 to what you need from https://github.com/emberjs/ember.js/releases)
rm -rf node_modules dist tmp
npm install --save-dev ember-cli#2.11.0
ember init
Node.js is required with every Ember installation and you have to check which version of node is required for the desired version of Ember you want to install. Most likely itll work well with the version currently installed.
you can download the latest (LTS) from: https://nodejs.org/en/
or older versions from: https://nodejs.org/dist/
OSx for example https://nodejs.org/dist/v4.7.0/node-v4.7.0-linux-x64.tar.gz
results

How do I include an Ember addon in an addon that I'm writing?

I'm writing an addon and I want to use ember-moment as a dependency. I've installed it in the addon but, when I run my app, I get the following error:
Uncaught Error: Assertion Failed: A helper named 'moment-from-now' could not be found
I've also tried importing a helper from ember-moment:
import momentFromNow from 'ember-moment/computeds/from-now';
and that fails with:
Could not find module `ember-moment/computeds/from-now`
FYI, I'm using npm link to export the addon and import it into the project.
Place the addon (ember-moment) in the dependencies section of your addon's package.json, not the devDependencies section.

Error installing ember-cli-mocha

I'm trying to setup an EmberJS project using ember-cli. I want to be able to use Mocha/Chai instead of the default qunit, but I am getting an error at the first step on installing ember-cli-mocha.
I create the new ember project with ember new my-project and then from within the project folder I run ember install ember-cli-mocha, selecting Yes to overwrite the tests/test-helper.js.
In the output, immediately following the Installed browser packages via Bower. message I see:
Package ember-cli/ember-cli-test-loader=ember-cli/ember-cli-test-loader not found
I can't find any information on this directly. I've tried installing the various packages themselves, before the ember-cli-mocha package via npm and bower, but I always get that message when installing ember-cli-mocha through ember-cli.
Anyone else have experience with this? Thanks in advance!

How should I import Bower dependencies from an Ember-cli addon into the consuming application?

I am successfully importing a jQuery plugin via Bower to be used in a component in an Ember-cli addon. However, this only works is because I defined a Bower dependency on this plugin in both the addon and the consuming application.
This seems like I'm doing it wrong. Why should the consuming application have to declare a dependency on a resource that should be provided with the addon?
The crux of the matter seems to be the app context when building. I can omit the Bower dependency in the consuming application if I use the following import statement in the addon's index.js file:
app.import('node_modules/my-ember-cli-addon/bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');
... but this breaks when I build the addon as a stand-alone application. In that case, this path is required:
app.import('bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');
How this is intended to work?
Declaring the Bower dependency in two places seems counter-intuitive
I don't know how detect the app context in the index.js of the addon
Checkout ember-cli homepage on default blueprints. It describes how you can import a bower component package upon installing your addon.

ember-cli watch file changes in subdirectories of the styles folder

I started using EmberJS and ember-cli for a new project. Therefore I created a new project with ember-cli and added broccoli-compass with sass support. When I execute "ember server" in the terminal, ember is just watching for file changes on /app/styles/app.scss. I want ember-cli to also reload on file changes in subdirectories of the /app/styles folder (e.g. /app/styles/helpers/breakpoints.scss). How can I configure ember-cli for this purpose?
I just tried making a helpers directory and watchme.scss, and it sucessfully watches for changes, I suggest update your ember-cli version via npm update ember-cli. Here's the output:
file changed styles/helpers/watchme.scss
Build successful - 157ms.