title: D3 with angular-cli
body: <p>I try to use angular-cli with D3.
  After</p>
  
  <pre><code>typings install d3 --save
  npm install d3
  </code></pre>
  
  <p>I have in node_modules</p>
  
  <p><a href="https://i.stack.imgur.com/X91n0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X91n0.png" alt="enter image description here"></a></p>
  
  <p>and in <code>typings</code> folder</p>
  
  <p><a href="https://i.stack.imgur.com/GOkLA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GOkLA.png" alt="enter image description here"></a></p>
  
  <p><strong>angular-cli-build.js</strong></p>
  
  <pre><code>module.exports = function(defaults) {
    var app = new Angular2App(defaults, {
      vendorNpmFiles: ['d3/d3.js']
    });
    return app.toTree();
  };
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    d3: {
      'd3': 'vendor/d3/d3.js'
    }      
  });
  </code></pre>
  
  <p>In <code>bar-chart</code> directive I try to import d3</p>
  
  <pre><code>import {Directive} from 'angular2/core';
  import d3 from 'd3';
  
  
  @Directive({
    selector: 'bar-graph',
    providers: [],
    host: {},
  
  })
  export class BarGraph {
  
    constructor() {
      console.log(d3);
    }
  
  }
  </code></pre>
  
  <p>But the app never loads, and <code>console.log</code> says that it tries to get localhost:4200/d3.</p>
  
  <p><a href="https://i.stack.imgur.com/Aov9u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Aov9u.png" alt="enter image description here"></a></p>