Michael Pell Michael Pell - 1 month ago 17
AngularJS Question

Simple Import of Node Module in Angular 2 with Typings

The head of my file looks like this:

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


But when I start the app I get this error:

http://localhost:3000/c3 Failed to load resource: the server responded with a status of 404 (Not Found)


c3 is included in package.json dependencies. typings.json looks like:

{
"globalDependencies": {
"d3": "registry:dt/d3#0.0.0+20160907005744",
"c3": "registry:dt/c3#0.0.0+20160926143332",
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"node": "registry:dt/node#6.0.0+20160831021119"
}
}


And typings/index.d.ts looks like:

/// <reference path="globals/d3/index.d.ts" />
/// <reference path="globals/c3/index.d.ts" />
/// <reference path="globals/core-js/index.d.ts" />
/// <reference path="globals/node/index.d.ts" />


tsconfig.json looks like:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"typings/index.d.ts"
]
}


Any clues about what is misconfigured?

Answer

Since you're using SystemJS you'll need to add the module to the systemjs.config.js file (or whatever you called it). You will need to add the module to the map and pakcages objects.