d3.jsを角度2にインポートする方法は？

Question

角度クリティカルとウェブパック外の角度2の最終バージョンを使用しています。

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

私はD3をインストール： NPMは、問題が何であるかを

--save D3をインストールしますか？

---

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 1

typings install --global --save dt~d3 

コード内にJavaScriptライブラリ（d3）があり、これをTypeScriptコードでインポートしようとしています。 TypeScriptはそのライブラリの "形"を知らず、そのためにはTypeScript definition fileをインストールする必要があります。これは、ライブラリの "シェイプ"だけの機能性を持たないため、TypeScriptコンパイラはそれが動作しているかどうかを知ることができます。