Question

嗨，我是角度2的新手。我正在尝试使用角度cli将d3库注入角度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'
        }
      }
    }
  });

和我包含在我的组件中。

当我尝试运行服务器时，它会抛出d3。找不到模块。如果某个机构可以提供帮助那就太好了

Answer 1

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

npm install @types/d3 --save

然后您可以立即在组件中使用它：

import * as d3 from 'd3';

Answer 2

我的system.config

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

Answer 3

在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工作。感谢

Answer 4

以下是如何使用d3

正确地将angular-cli添加到项目中

npm install d3 --save

<强>角-CLI-build.js

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

<强>系统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

查看几个完整的工作导入

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

4 个答案: