Can't import 'baconjs' into Angular 2 service

Question

I am using angular-cli to create a new Angular 2 project. I am trying to add the 'baconjs' npm project, but having no success.

I am following the instructions here: https://github.com/angular/angular-cli/wiki/3rd-party-libs

The npm and typings installs work find. Changing the angular-cli-build.js file causes 'vendor/baconjs/dist/Bacon.js' to be installed in the dist/ directory. However, attempting import * as foo from 'baconjs' results in this error:

Cannot find module 'baconjs'.

I have also tried ...from 'baconjs/Bacon' and ...from 'baconjs/Bacon.js'. I have tried many different incantations in my system-config.ts. This is my current version:

const map: any = {
  'baconjs': 'vendor/baconjs/dist'
};

/** User packages configuration. */
const packages: any = {
  'baconjs': { main: 'Bacon', defaultExtension: 'js' }
};

I have tried all of the different values for the 'format' field. I have tried with and without the defaultExtension. I've tried lots of stuff. No dice.

Mysteriously, System.import('baconjs/Bacon.js') seems to work just fine when placed at the top of the very same file with the bad import. So all of that systemjs config is doing something.

Hmm, looks like similar questions are asked all over the place. Oh well. Putting it on the record....

George Madrid George Madrid · Accepted Answer · 2016-06-30T01:21:07

Okay, here is what worked for me after reading a lot of docs and playing around a lot. These are almost the same as the instructions for underscore on the angular wiki, but with one important change.

npm install baconjs --save
typings install baconjs --save --global

Change the angular-cli-build and system-config files as described, then in the typescript file for your service file:

/// <reference path="../../../../../../typings/globals/baconjs/index.d.ts" />
import * as Bacon from 'baconjs';

The difference is the import line, as opposed to the declare var _; in the wiki. It is also important that the /// <reference ... line be the very first line in the file.

Can't import 'baconjs' into Angular 2 service

1 Answers