D3 с угловым cli

Question

Я пытаюсь использовать угловое 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(); 
}; 

index.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 говорит, что он пытается получить локальный: 4200/d3.

Answer 1

У меня такая же проблема, я нашел этот пример со старой версией углового (2.0.0-alpha.27), но, возможно, могу помочь.

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

Answer 2

Я думаю, что вам нужно, чтобы добавить запись d3 в map блоке:

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

Answer 3

Я получил я работаю, следуя следующим шагам.

первой установки:

npm install d3 --save 

Затем добавьте d3 к angular-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 и delcare d3 переменной, где он используется, чтобы избежать проблем при компиляции:

import 'd3' 
declare var d3; 

Answer 4

Вот ответ, который работает!

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