如何使用 Angular CLI 将 d3 或任何模块添加到 Angular 2？答案

【问题标题】：How to add d3 or any module to angular 2 using Angular CLI?如何使用 Angular CLI 将 d3 或任何模块添加到 Angular 2？
【发布时间】：2016-09-18 10:02:16
【问题描述】：

您好，我是 angular 2 的新手。我正在尝试使用 angular cli 将 d3 库注入到 angular 2。我使用 npm install d3 安装了 d3。我点击了链接

https://github.com/angular/angular-cli/wiki/3rd-party-libs

我按照步骤进行了

`我的 angular-cli-build.js.

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

module.exports = function(defaults) {
 return new Angular2App(defaults, {
 vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/**/*.+(js|js.map)',
  'es6-shim/es6-shim.js',
  'reflect-metadata/**/*.+(js|js.map)',
  'rxjs/**/*.+(js|js.map)',
  '@angular/**/*.+(js|js.map)',
  '@angular2-material/**/*.+(js|css)',
  'd3/**/*.js',
  'ng2-material/**/*.+(js|css)'
]
});
};

我的 index.html

 System.config({
    map:{
      "d3Lib":"vendor/d3"
    },
    packages:{
      'd3Lib':{
        defaultExtension:'js',
        map:{
          './d3':'./d3.js'
        }
      }
    }
  });

并且我包含在我的组件中。

当我尝试运行 ng 服务器时，它会抛出 d3。未找到模块。如果有人能帮忙就太好了

【问题讨论】：

你能分享一下系统配置文件吗？

标签： angularjs d3.js angular

【解决方案1】：

我的系统配置

System.config({
    map:{
      '@angular2-material':'vendor/@angular2-material'
    },
    packages:{
      '@angular2-material':{
        map:{
          './button':'./button/button.js',
          './card':'./card/card.js',
          './checkbox':'./checkbox/checkbox.js',
          './input':'./input/input.js',
          './progress-circle':'./progress-circle/progress-circle.js',
          './sidenav':'./sidenav/sidenav.js',
          './toolbar':'./toolbar/toolbar.js'
        }
      }
    }
  });

  System.config({
    map:{
      "d3Lib":"vendor/d3"
    },
    packages:{
      'd3Lib':{
        defaultExtension:'js',
        map:{
          './d3':'./d3.js'
        }
      }
    }
  });
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));

【讨论】：

【解决方案2】：

在 angular-cli 中添加对我有用的第三方库的步骤

从打字下载d3打字并将其粘贴到主文件夹和浏览器文件夹以及打字文件夹中。

在相应的 index.ts 文件中添加引用。

在 system.config（我的 system.config 文件）中添加地图。

<script>
  System.config({
    map:{
      '@angular2-material' : 'vendor/@angular2-material',
      "d3" : "vendor/d3/d3.js",
      "lodash" : "vendor/lodash/lodash.js",

      "@angular/platform-browser": "vendor/@angular/platform-browser",
      '@angular/core/src/facade': 'vendor/@angular/core/src/facade',
      //'@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js',
      'angular2-modal': 'vendor/angular2-modal',
      'angular2-modal/platform-browser': 'vendor/angular2-modal/platform-browser'



    },
    packages:{
      '@angular2-material':{
        map:{
          './button':'./button/button.js',
          './card':'./card/card.js',
          './checkbox':'./checkbox/checkbox.js',
          './input':'./input/input.js',
          './progress-circle':'./progress-circle/progress-circle.js',
          './sidenav':'./sidenav/sidenav.js',
          './toolbar':'./toolbar/toolbar.js',
          './icon':'./icon/icon.js'
        }
      },
      "d3": {
        "defaultExtension": "js"
      },
      "lodash": {
        "defaultExtension": "js"
      },
       '@angular2-material/core': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'core'
        },
        '@angular2-material/checkbox': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'checkbox'
        },
        '@angular2-material/button': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'button'
        },
        '@angular2-material/icon': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'icon'
        },
        '@angular2-material/sidenav': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'sidenav'
        },
        'vendor/angular2-modal': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/platform-browser': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/bootstrap': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/vex': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/js-native': {main: 'index.js', defaultExtension: 'js'},
        '@angular/core/src/facade': {defaultExtension: 'js'}


    }
  });
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>

在对应的组件中导入

import * as d3 from 'd3';

按照相同的步骤对 lodash 效果很好。谢谢

【讨论】：

【解决方案3】：

以下是如何正确地将d3 添加到带有angular-cli 的项目中：

npm install d3 --save

angular-cli-build.js

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

system-config.js

map['d3'] = 'vendor/d3/build';

packages['d3'] = {
  main: 'd3',
  format: 'global' 
};

app.component.ts

import * as d3 from 'd3';

在https://github.com/benshope/focus查看几个完整的工作导入

【讨论】：

【解决方案4】：

从未尝试过使用angular2，但我将d3js 安装到我的ionic2 项目中，如下所示：

npm install @types/d3 --save

那么你可以立即在你的组件中使用它：

import * as d3 from 'd3';

【讨论】：