将 D3 与 Angular-cli 集成答案

【问题标题】：Integrating D3 with Angular-cli将 D3 与 Angular-cli 集成
【发布时间】：2017-01-05 01:57:15
【问题描述】：

我正在尝试将 D3 图表库与 Angular CLI 集成。首先，我使用 npm install d3 --save 安装了 d3。完成后，我的 node_modules 看起来像

d3 版本是 "d3": "^4.2.2"。

然后我设置如下配置。

angular-cli-build.js

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

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

system-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});

在 app.module.ts 中，我导入了 d3，如下所示。

import * as d3 from 'd3';

那么，

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

以下是我的 dist 文件夹的外观，

当我尝试使用 ng build 构建项目时，出现以下错误。

 Cannot find module 'd3'

非常感谢任何建议。

谢谢

【问题讨论】：

标签： d3.js angular angular-cli

【解决方案1】：

您应该尝试将 d3 typings 添加到您的项目中，d3 不包括类型，您必须让它使用导入系统。

你可以：

使用TypeScript Definition Manager 在您的项目中导入请求的类型：

typings install dt~d3 --global --save

然后你的类型目录中就会有 d3 的定义文件。
参考angular-cli，可以使用 npm 安装类型：

npm install @types/d3 --save-dev

毕竟，您应该查看 d3 定义文件，以确保这是 d3 最新版本的正确输入。

【讨论】：