D3 with angular-cli

Question

I try to use angular-cli with D3. After

typings install d3 --save
npm install d3

I have in node_modules

and in typings folder

angular-cli-build.js

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

index.html

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

In bar-chart directive I try to import d3

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


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

})
export class BarGraph {

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

}

But the app never loads, and console.log says that it tries to get localhost:4200/d3.

Answer 1

Here is an answer that works!

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

Answer 2

I have the same issue, i found this example with an old version of Angular (2.0.0-alpha.27) but maybe can help.

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

Answer 3

I think that you need to add the d3 entry in the map block:

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

Answer 4

I got i working following the next steps.

first install:

npm install d3 --save

Then add d3 to angular-cli-build.js like this:

// 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'
    ]
  });
};

And modify your 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'},
};

To make sure that systemJS loads your module add an import to your index.ts and delcare the d3 variable where it's used to avoid compilation problems:

import 'd3'
declare var d3;