Ember-cli adding dependencies with bower

Ember CLI
1

So - I want to have a play with typeahead in an ember app.

I get a cli app up and running then I run

bower install typeahead.js

I can see that the code has been put into bower_components.

I then add the following to the brocfile:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

app.import('bower_components/typeahead.js/dist/typeahead.bundle.min.js');

module.exports = app.toTree();

However it doesn’t work - I get

Uncaught ReferenceError: Bloodhound is not defined

From reading the docs - installing with bower and adding the lines in the brocfile should be enough to satisfy it? Am I reading it wrong or is this a bug?

I have created a public GIT repo which shows this issue:

https://github.com/wayne-o/ember-cli-bootstrap

All I have done is:

ember new bootstrap-test
bower install bootstrap

And then added:

app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

to the brockfile…

It hasn’t worked…

I can’t get typeahead or bootstrap to work…

2

I cloned the repo and did the following:

$ bower install bootstrap
$ bower install && npm install
$ ember build

In the dist folder I see bootstrap css and js in the vendor files.

Remember that changes to the Brocfile.js are not picked up until you restart the ember server.

1 Like
3

Ah!! right - I did not know this… Thanks - I will try the above out

BOOM!! that was it! so just editing a file to cause the page to refresh won’t do…

4

Yeah there’s an issue open about this on Github https://github.com/stefanpenner/ember-cli/issues/1756

5

Cool, thanks. OK so bootstrap worked fine, but now I am trying to do the same with typeahead.js and I’m getting no luck again.

I have pushed my changes to the repo if you can spare a minute.

6

It should be working if you test it in the browser. The errors you’re seeing are caused by JSHint which isn’t liking the fact that you’re using globals.

Just add this somewhere in your index.js view file if you want to silence the errors.

/* global $, Bloodhound */

Also when installing dependencies please save them in your bower.json file so that when someone pulls your repo down they are not missing dependencies. Use bower install --save <name>.

7

I want that issue fixed also, but it is unlikely to be fixed soonish (it is fairly complicated).

8

OK that got me working! Cheers guys - I’m learning a lot today!