如何將d3.js導入到角度2？

我使用角度cli和webpack的角度2的最終版本。如何將d3.js導入到角度2？

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

我安裝D3： NPM安裝D3 --save

是什麼問題？

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 
    } 
}

來源

2016-09-30 Stav Alfi

你可以發佈你的tsconfig.json嗎？ –

我將tsconfig.json添加到了問題的詳細信息中。 –

typings install --global --save dt~d3

您的代碼中有一個JavaScript庫（d3），並且您正嘗試將它導入到TypeScript代碼中。 TypeScript不知道該庫的「形狀」，並且您需要安裝TypeScript definition file才能正常工作。它沒有任何功能，只是庫的「形狀」，以便TypeScript編譯器知道它的工作原理。

來源

2016-09-30 04:27:33

感謝您的嘗試，但webstorm仍然無法找到模塊d3。 –

沒有任何意義...讓我試試看。 –

試試這個：分型安裝--global --save DT-D3 –

如何將d3.js導入到角度2？

回答

相關問題