How to add d3 or any module to angular 2 using Angular CLI?

Question

Hi I am new to angular 2. I am trying to inject d3 library to angular 2 using angular cli. I installed d3 using npm install d3. I followed the link

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

I followed the steps

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

my index.html

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

and i included in my component.

When i tried to run ng server it throws d3. module not found. It would be great if some body could help

Answer 1

Never tried it with angular2 but I installed my d3js to my ionic2 project like this:

npm install @types/d3 --save

then you can immediately use it in your components:

import * as d3 from 'd3';

Answer 2

My 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

Steps for adding third party library that worked for me in angular-cli

download the d3 typing from typing and paste it in main and browser folder with in typing folder.

Add reference in corresponding index.ts files.

Add the map in the system.config (My system.config file).

<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 it in the corresponding components

import * as d3 from 'd3';

following the same steps worked for lodash well. Thanks

Answer 4

Here is how to correctly add d3 to a project with 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';

See several full working imports at https://github.com/benshope/focus