Rose18 Rose18 - 1 year ago 241
AngularJS Question

Integrating D3 with Angular-cli

I am trying to integrate D3 chart library with Angular CLI. First I installed d3 with npm install d3 --save. Once done my node_modules looks like

It added following highlighted folders to node_modules folder

d3 version is "d3": "^4.2.2".

Then I set up configuration as below.


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

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [


"use strict";

// SystemJS configuration file, see links for more information

* User Configuration.
/** Map relative paths to URLs. */
const map:any = {
'@angular2-material': 'vendor/@angular2-material',
// 'd3': 'vendor/d3'
'd3': 'vendor/d3/build'

/** User packages configuration. */
const materialPackages:string[] = [
const packages:any = {
'd3': {
format: 'cjs',
defaultExtension: 'js',
main: 'd3'
materialPackages.forEach(name => {
packages[`@angular2-material/${name}`] = {
format: 'cjs',
defaultExtension: 'js',
main: name

* Everything underneath this line is managed by the CLI.
const barrels:string[] = [
// Angular specific barrels.

// Thirdparty barrels.

// App specific barrels.
/** @cli-barrel */

const cliSystemConfigPackages:any = {};
barrels.forEach((barrelName:string) => {
cliSystemConfigPackages[barrelName] = {main: 'index'};

/** Type declaration for ambient System. */
declare var System:any;

// Apply the CLI SystemJS configuration.
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
packages: cliSystemConfigPackages

// Apply the user's configuration.
System.config({map, packages});

In app.module.ts, I imported d3 as below.

import * as d3 from 'd3';


declarations: [AppComponent, d3],
providers: [],
imports: [],
bootstrap: [AppComponent],

Following is what my dist folder looks,

enter image description here

When I try to build the project with ng build it gives below error.

Cannot find module 'd3'

Any suggestions are highly appreciated.

Thank You

Answer Source

You should try to add d3 typings to your project, d3 does not include typings and you have to get it to use the import system.

You can :

  • use the TypeScript Definition Manager in order to import the requested typing in your project :

    typings install dt~d3 --global --save

    Then you will have the definition file for d3 in your typings directory.

  • Refers to angular-cli, you can install typings by using npm :

    npm install @types/d3 --save-dev

After all, you should take a look to the d3 definition file to be sure that is the correct typing for the latest release of d3.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download