Consume CommonJS Module Angular 2 - angularjs

Question

I'm trying to write a simple Angular 2 application which consumes a CommonJS Node module (Node Yelp). Angular 2 by default uses SystemJS which has the ability to load different module formats.
I have tried several different SystemJS configurations and import statements, but all of them seem to end with
SyntaxError: Unexpected token <(…)
Currently, my SystemJS configuration looks like
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
yelp: 'node_modules/yelp'
}
});
System.import('app/main')
.then(null, console.error.bind(console));
and my simple AppComponent.ts
import {Component} from 'angular2/core';
import Yelp from 'yelp';
#Component({
selector: 'app',
templateUrl: '/app/app.component.html'
})
export class AppComponent {
constructor(yelp: Yelp) {
console.log(yelp);
}
}
I'm still trying to wrap my head around the whole module system, so I'm not exactly sure what to change here. Any results online seem to be out dated, or not direclty related to loading CommonJS node modules with SystemJS.

Answer 1

I think that you could try something like that:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
yeld: {
main: index.js
}
},
map: {
yelp: 'node_modules/yelp'
}
});
and
import * as Yelp from 'yelp';

Answer 2

The solution, as I expected, turned out to be an easy one.
Don't try roll your own System.config when using NPM packages in Angular 2
Instead, use jspm to install packages. By doing so, all of the System.config will be taken care of by jspm. In this particular case, it was as easy as
jspm install npm:yelp
Then just adding
import Yelp from 'npm:yelp#1.0.1';
to the top of my AppComponent.ts file