Not possible to install add-on for ember-cli - ember.js

I am trying to test the ember-select-2 component. It is advertised as very easy to set-up. According to the readme:
# install addon from npm repository
$ npm install ember-select-2
# install dependencies
$ ember g ember-select-2
Installing the add-on works:
» npm install ember-select-2
But installing the dependency fails:
» ember g ember-select-2
version: 0.1.2
Unknown blueprint: ember-select-2
The only thing I have been able to find is that ember-select-2 is an extraneous npm package (whatever that means)
» npm list ember-select-2
test13#0.0.0 .../test13
└── ember-select-2#1.0.1 extraneous
This is my ember-cli installatioon:
» ember --version
version: 0.1.2
node: 0.10.25
npm: 2.1.3
How did I manage to break such a simple how-to?
EDIT
I did some research: extraneous just means that it is not in the package.json. Adding --save solves that. So that is just a warning, and not the source of my problem.

If you don't set the save flag, the package isn't added to your package.json file as a dependency it is only downloaded into node_modules, you will either have to add it manually or use the flag and have it save you a step.
--save: Package will appear in your dependencies.
--save-dev: Package will appear in your devDependencies.
--save-optional: Package will appear in your optionalDependencies.
When using any of the above options to save dependencies to your
package.json, there is an additional, optional flag:
--save-exact: Saved dependencies will be configured with an exact version rather than using npm's default semver range operator.
More info can be found in the npm install docs.

As the maintainer of the package, I apologize for the inconvenience caused by the documentation.
I immediately fixed the command to include --save-dev, which seems to be the right way to install ember-cli addons.

Related

Why should I use ember install over NPM or yarn?

I'm new to ember and I discover the command ember install pkg and I'm wondering why such package instead of using external package manager such as yarn or npm which are industry-wide/de-facto standard.
Question
Why should I use ember install over NPM or yarn?
ember install addon-name is a short hand for npm install --save-dev addon-name && ember g addon-name
The documentation provides the answer for this one (ctrl + f ember install):
Installs the given addon into your project and saves it to the
package.json file. If provided, the command will run the addon’s
default blueprint.
The release notes for version 0.1.5 provide a clue for this as well:
#2805 Added the install:addon command, which installs an addon with NPM and then runs the included generator of the same name if it
provides one.
So, ember install is just a replacement for npm in most cases but when a blueprint is provided it will run those as well.

What is the difference between Node Package and Bower Package?

Taking Ember App for example. ember install ember-bootstrap-4 will add node package. But bower install tether --save will add bower package. Both are part of the app. But why one is in bower and one is in npm?
npm and bower are both packages manager in your Ember application but there are some differences in using them:
Bower is only used in front-end. It will download bower package into your Ember project (bower_component folder) and you still have to add it to your app's assets. For example, if you install moment package in bower, you have to add it to your app by going to ember-cli-build.js and add the following line app.import('bower_components/moment/moment.js'); (view more details in Ember Addons and Dependencies)
NPM is used for server packages. It will download packages into node_modules project. Every ember-cli addons is in npm and when you type ember install <addons-name>, ember will look up for ember addon, place your addon's info in package.json and download it in node_modules folder. Then, Ember will load it automatically for you.
bower install - is for including run time dependencies and you need to import it in ember-cli-build.js to use.
npm install - is for including development/build time dependencies.

Using Gulp with Visual Studio Team Services

I'm looking to set up automated builds with Visual Studio Team Services but I keep running into trouble. My build definition:
npm install gulp
npm install --save-dev jshint gulp-jshint ruby
npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
gem install sass
gulp
The build fails when attempting to install the sass gem with "'gem' is not recognized as an internal or external command". If I build without installing the sass gem first, gulp will fail with "'sass' is not recognized as an internal or external command". Anyone have experience with getting sass to work in Visual Studio Team Services?
There seem to be several issue here. First you might need to make you familiar how npm works, whats the meaning of --save-dev and whats the difference between local and globally installed modules.
--save-dev is used to save the package for development purpose, while --save is used to save the package required for the application to run. Both are commands which you run on your development machine and you put the resulting package.json under version control.
On the build server you will just run an npm install which will restore all the packages listed in the package.json.
These is for local modules. You can also install modules globally using the -g flag. This will store them outside of your current project, and binaries will be available in your PATH variable. Modules which you need inside your project (using require) need to be installed locally. Modules you'll call from the shell (eg gulp-cli) need to be installed globally.
Therefore what you need to do:
On your development machine add all local npm modules using npm install with either the --save or --save-dev flag.
Put the resulting package.json file under version control.
On the build server you need to make sure that all required global npm modules are installed.
Call npm install using the VSTS npm task to restore the local npm modules. You won't need to specify which modules need to be installed, since they're already listed in the package.json file.
Call gulp using the VSTS gulp task with the appropriate arguments.

How do I use my fork of ember-data in ember-cli?

I'm working on a pull-request for ember-data, and I'd like to be able to test these changes in my ember-cli app.
It doesn't work to follow the directions for using canary here or here, as my fork does not get built my components.
I've tried referencing my fork and branch in packages.json as well as bower.json; then I get this error:
Path or pattern "bower_components/ember-data/ember-data.js" did not match any files
I can then build ember-data manually and copy the file to bower_components/ember-data/ember-data.js. However, I would like a streamlined way to use a fork of ember-data so I can use and test my pull-request without a lengthy install process.
Is there a better way?
Thanks!
You can use a symlink to your local version of a bower and/or npm dependency.
Go to your local (forked) version of ember-data and
npm link
bower link
This will make a global symlink to your local version.
Then go to where you're using the dependency and
npm link ember-data
bower link ember-data
This will make node_modules/ember-data and bower_components/ember-data a symlink to your local version.
See https://docs.npmjs.com/cli/link and http://bower.io/docs/api/#link for more details on how these work.
You are getting that error because you are trying to use the NPM package of ember-data with Bower, and Bower needs ember-data to be precompiled. You were correct to fork emberjs/data and reference your fork in package.json. Here is how I compiled my fork for bower:
In your forked repo, run npm install and npm run build:production to compile your fork in the dist directory.
Then fork the ember-data shim for bower: components/ember-data. Copy the following files from your ember-data fork's dist directory into the shim's directory:
bower.json
component.json
composer.json
ember-data.js
ember-data.js.map
ember-data.min.js
ember-data.prod.js
package.json
Edit the bower/package files if you want to add your own version tag. Commit the shim repo to a branch or master, and then reference that commit in your ember-cli app's bower.json file. Then run npm install and bower install in your ember-cli app.

npm install ember-data just installs index.js file

When I do npm install ember-data --save, I get only the following files:
./node_modules/ember-data/
./node_modules/ember-data//lib
./node_modules/ember-data//lib/ember-addon
./node_modules/ember-data//lib/ember-addon/blueprints
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data/index.js
./node_modules/ember-data//lib/ember-addon/index.js
./node_modules/ember-data//package.json
./node_modules/ember-data//README.md
I was expecting the same files bower installs, such as ember-data.min.js.
My hunch is I need to do npm install from within node_modules/ember-data? If so, why the extra step?
ember-data is meant to be installed with bower with
$ bower install --save ember-data
Installing ember-data with npm will add it as an add-on for ember-cli project. It will include the files from bower_components. you still need the bower version.
ember-cli has built-in support for ember-data.