javascript - D3 与 angular-cli

Question

我尝试将 angular-cli 与 D3 一起使用。后

typings install d3 --save
npm install d3

我在 node_modules

并在typings文件夹中

角-cli-build.js

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

索引.html

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  d3: {
    'd3': 'vendor/d3/d3.js'
  }      
});

在bar-chart指令中我尝试导入 d3

import {Directive} from 'angular2/core';
import d3 from 'd3';


@Directive({
  selector: 'bar-graph',
  providers: [],
  host: {},

})
export class BarGraph {

  constructor() {
    console.log(d3);
  }

}

但是该应用程序永远不会加载，并console.log说它试图获取 localhost:4200/d3。

Answer 1

这是一个有效的答案！

npm install d3 --save

角-cli-build.js

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

系统配置.js

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

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

app.component.ts

import * as d3 from 'd3';

Answer 2

我认为您需要在map块中添加 d3 条目：

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: { // <-----
    'd3': 'vendor/d3/d3.js'
  }      
});

Answer 3

我让我按照接下来的步骤工作。

第一次安装：

npm install d3 --save

然后添加 d3angular-cli-build.js像这样：

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'd3/build/d3.js'
    ]
  });
};

并修改您的system-config.ts：

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  "d3" : "vendor/d3/build/d3.js",
  'jquery': 'vendor/jquery/dist/jquery.js'
};

/** User packages configuration. */
const packages: any = {
  'moment': { format: 'cjs'},
  'jquery': { format: 'global'},
  "d3": { format: 'global'},
};

要确保 systemJS 加载您的模块，请向您的模块添加一个导入index.ts并删除d3用于避免编译问题的变量：

import 'd3'
declare var d3;

Answer 4

我有同样的问题，我发现这个例子是旧版本的 Angular（2.0.0-alpha.27），但也许可以提供帮助。

https://github.com/gdi2290/ng-vegas-angular2-d3