Create addon with Bower dependency

1

Ember-CLI 1.13.8

I’ve created an addon that has a single Bower dependency. Running ember serve within the addon project works fine. However, i cannot install the addon properly because the Bower dependency is not found.

I’ve looked through quite a few articles online, collecting all the steps required and sorting through the outdated info. Unfortunately, several of the most recent articles are obviously incomplete. One of them is missing what appears to be a crucial code block. :frowning:

I’ve also browsed through a bunch of addons, looking for any with Bower dependencies to see how they were handled. However, all i’ve turned up use apparently hacky methods to insert a script tag to pull in the other lib(s). Pointers to any addon examples that don’t do that also much appreciated.

I reopened a year-old question here that appears to involve the same problem but felt i’d better create one with a more specific subject. The details of what i’ve tried are included in this SO question.

I’d really appreciate it if someone could take a look to see if they can spot anything i’m missing. If i can get this working i promise to use that info to update the official docs.

(Bonus: how does one update the official docs?)

2

It should work like this

https://github.com/nolanlawson/ember-pouch/blob/master/blueprints/ember-pouch/index.js

If you don’t use the return the installer skips waiting for the promises to resolve. Then your dependencies are not installed.

3

Bonus.

Fork: GitHub - emberjs/guides: This repository is DEPRECATED!

after cloning your fork create a new branch with git checkout -b bowerdep

Edit… commit and git push origin bowerdep

Create a PR on gihub for the branch bowerdep

I hope to see your doc change.

4

@broerse But my addon doesn’t use pouchdb.

I kid! Thanks a bunch! I had the return, but I was missing the “this.”

I fixed that, then created a new, empty app. Then:

npm link ember-cli-foo
ember serve

I then added a simple controller that injects the service:

export default Ember.Controller.extend({
  foo: Ember.inject.service(),

and got:

Attempting to inject an unknown injection: service:foo`

I then added back the initalizer that I’d previously removed from the addon. (I’d read somewhere that it’s no longer necessary.)

// addon/initializers/foo.js
import FooService from "../services/foo";

export function initialize(container, app) {
  app.register("service:foo", FooService, {singleton: true});
  app.inject("route", "foo", "service:foo");
  app.inject("controller", "foo", "service:foo");
}

export default {
  name      : "foo",
  initialize: initialize
};

And tried ember serve again. Same error.

I then thought to include a dummy initializer under app, pointing into the addondir, as i did for the service. No dice.

I also understand that we no longer need to run the blueprint manually. In any case, when I do so …

$ ember g ember-cli-foo
Unknown blueprint: ember-cli-foo

The situation i’m in is that I have no idea whether the problem is in my code, or I’ve uncovered a bug relating to local npm packages. The former is far more likely, of course, especially with the disparate sources of (sometimes outdated) information. Not to mention the myriad things i’ve been trying.

I’m going to go back through the Ember source again when I get home. Although npm link will place the package under node_modules, Ember doesn’t know about it. I’m wondering whether the problem is that I’m not running ember install ..., that perhaps there’s an important step in there that’s being missed. However, I can’t run that because the local package is ignored and it goes looking online for it. I don’t want to npm publish just yet as the package is completely untested aside from running jslint!

Thanks for the tip. I promise, those docs will be thorough if i can ever get this working.

5

One other thing i tried:

$ rm -Rf node_modules/ember-cli-foo
$ ember install ../ember-cli-foo
...
Installed packages for tooling via npm.
installing ember-cli-foo

And the package is indeed inside node_modules.

$ ember serve
...
Serving on http://localhost:4200/
ENOENT, no such file or directory '/home/bally/dev/apps/foo/tmp/concat_with_maps-input_base_path-Q5sVZ6Me.tmp/0/bower_components/foo/web/foo.js'

I then tried generate again. (Although, the above error suggests that Ember already has handled, if only partially, the bower dependency.)

$ ember g ember-cli-foo
...
installing ember-cli-foo
The `ember generate` command requires an entity name to be specified. For more details, use `ember help`.

$ ember serve
...
Serving on http://localhost:4200/
ENOENT, no such file or directory '/home/bally/dev/apps/foo/tmp/concat_with_maps-input_base_path-XBOtoAKR.tmp/0/bower_components/foo/web/foo.js'

At least it appears that Ember is aware, at some point, of the bower dependency. I’ll look into this further over the weekend when I have time to study the source.

6

I am certainly not en expert but perhaps you can put your addon on github and we can try to fix this together. I seem to have some time this Sunday.

7

Thanks for the offer. I’ll post the link as soon as I can push later this evening.

8

@broerse Here’s the repo if you’d like to take a look:

I made one more change. I learned that I need to pass both the bower package name and version to addBowerPackageToProject. However,that did not resolve the problem.

Right now I’m trying to figure out how I can debug what’s going on inside both Blueprint and broccoli-caching-writer.

I’ve left the initializer in place for now untilI can verify in the docs that it’s no longer required.

Note that I’m deleting and creating new apps in which to install this as I try different approaches, to ensure I’m not polluting things.

If you have a cance, and feel like it, I’d appreciate any thoughts. But please don’t feel obligated. I didn’t have any plans for this weekend, anyway. :slight_smile:

9

Lets see if we can fix this. I will take a look at it tomorrow.

10

I can install it now.

https://github.com/brianally/ember-cli-pubnub/pull/1

11

Thanks, @broerse. But I still cannot install it into another app. The blueprint doesn’t run. (I’ve added some ui.writeLine calls.) Are you using npm link? Installing from github?

Also, what’s up with normalizeEntityName? I can’t see anywhere that it must be included, even if it does nothing. (btw, I was thoroughly confused when you placed that inside afterInstall :slight_smile:

12

As I said I am not an expert writing on the wrong line :wink:

I installed it in a new ember app directly from github,

ember install https://github.com/broerse/ember-cli-pubnub#fix1

The bower dependency was installed correct. Read some more on normalizeEntityName here:

13

Yep, that’s what worked for me, too. I forgot to reply before shutting down earlier. I suppose installing it this way is fine for now. I just wanted to make sure it could be installed before doing npm publish.

Read some more on normalizeEntityName

Strange that it needs to be there even though nothing is returned. I’ll look into that a little closer before updating the docs.

Thanks for the help!