D3とAngular-Cliの統合

Question

D3のチャートライブラリをAngular CLIと統合しようとしています。最初にnpmをインストールしてd3をインストールしました。d3 --saveをインストールします。一度D3バージョン

のように見える私のnode_modulesを行っては "D3" である： "^ 4.2.2"。

次に、以下のような設定を行います。 app.module.tsで

角度-CLI-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

    module.exports = function(defaults) { 
     return new Angular2App(defaults, { 
     vendorNpmFiles: [ 
      ...... 
      'd3/**/*' 
     ] 
     }); 
    }; 

システムconfig.ts

"use strict"; 

    // SystemJS configuration file, see links for more information 
    // https://github.com/systemjs/systemjs 
    // https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 

    /*********************************************************************************************** 
    * User Configuration. 
    **********************************************************************************************/ 
    /** Map relative paths to URLs. */ 
    const map:any = { 
     '@angular2-material': 'vendor/@angular2-material', 
     // 'd3': 'vendor/d3' 
     'd3': 'vendor/d3/build' 
    }; 

    /** User packages configuration. */ 
    const materialPackages:string[] = [ 
     'core', 
     'button', 
     'icon', 
     'sidenav', 
     'toolbar', 
     'list', 
     'card' 
    ]; 
    const packages:any = { 
     'd3': { 
     format: 'cjs', 
     defaultExtension: 'js', 
     main: 'd3' 
     }, 
    }; 
    materialPackages.forEach(name => { 
     packages[`@angular2-material/${name}`] = { 
     format: 'cjs', 
     defaultExtension: 'js', 
     main: name 
     }; 
    }); 

    //////////////////////////////////////////////////////////////////////////////////////////////// 
    /*********************************************************************************************** 
    * Everything underneath this line is managed by the CLI. 
    **********************************************************************************************/ 
    const barrels:string[] = [ 
     // Angular specific barrels. 
     '@angular/core', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/forms', 
     '@angular/http', 
     '@angular/router', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 

     // Thirdparty barrels. 
     'rxjs', 

     // App specific barrels. 
     'app', 
     'app/shared', 
     'app/bar', 
     'app/chart', 
     /** @cli-barrel */ 
    ]; 

    const cliSystemConfigPackages:any = {}; 
    barrels.forEach((barrelName:string) => { 
     cliSystemConfigPackages[barrelName] = {main: 'index'}; 
    }); 



    /** Type declaration for ambient System. */ 
    declare var System:any; 

    // Apply the CLI SystemJS configuration. 
    System.config({ 
     map: { 
     '@angular': 'vendor/@angular', 
     'rxjs': 'vendor/rxjs', 
     'main': 'main.js', 
     }, 
     packages: cliSystemConfigPackages 
    }); 

    // Apply the user's configuration. 
    System.config({map, packages}); 

、Iは以下のようにD3をインポート。

import * as d3 from 'd3'; 

その後、続いて

@NgModule({ 
     declarations: [AppComponent, d3], 
     providers: [], 
     imports: [], 
     bootstrap: [AppComponent], 
    }) 

私はNGビルドでプロジェクトをビルドしようとすると、それは以下与え

、私のdistのフォルダが見えるものですエラー。

Cannot find module 'd3' 

どのような提案も高く評価されます。

はあなたが

Answer 1

あなたは、d3はタイピングが含まれていないプロジェクトにD3タイピングを追加してみてくださいありがとう、あなたはそれがインポート・システムを使用するために取得する必要があります。

次のことが可能です。

• プロジェクトで要求されたタイピングをインポートするためにTypeScript Definition Managerを使用します。

  typings install dt~d3 --global --save

  その後、あなたのタイピングのディレクトリにD3のための定義ファイルを持っています。

• がangular-cliを指し、あなたはNPM使ってタイピングをインストールすることができます：すべての後に

  npm install @types/d3 --save-dev

を、あなたはそれが正しいタイピングことを確認するために、D3定義ファイルに見てみる必要がありますd3の最新リリースのために。