Stav Alfi Stav Alfi - 1 year ago 263
Javascript Question

how to import d3.js to angular 2?

I'm using the final version of angular 2 with out angular cli and webpack.

import * as d3 from 'd3'; //ERROR: Cannot find module 'd3'


I installed d3:
npm install d3 --save

what is the problem?




system.config.js:

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',

// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'map': 'npm:d3',
'rxjs': 'npm:rxjs',
'@ngrx': 'npm:@ngrx',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
d3: {
main: 'd3',
format: 'global'
},
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main: '/bundles/Rx.min.js',
defaultExtension: 'js'
},
'@ngrx/core': {
main: 'bundles/core.min.umd.js',
format: 'cjs'
},
'@ngrx/store': {
main: 'bundles/store.min.umd.js',
format: 'cjs'
},
'@ngrx/effects': {
main: 'index.js',
format: 'cjs'
},
'@ngrx/store-devtools': {
main: 'bundles/store-devtools.min.umd.js',
format: 'cjs'
},
'@ngrx/store-log-monitor': {
main: 'bundles/store-log-monitor.min.umd.js',
format: 'cjs'
},
'@ngrx/router-store': {
main: 'bundles/router-store.min.umd.js',
format: 'cjs'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);


typings.json:

{
"globalDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160831021119",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
}
}


tsconfig.json:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}

Answer Source
typings install --global --save dt~d3

You have a JavaScript library(d3) in your code and you are trying to import it in TypeScript code. TypeScript does not know the "shape" of that library and you need to install a TypeScript definition file for that to work. It does not have any functionality, just the "shape" of the library so that the TypeScript compiler knows what it's working with.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download