将 D3 与 Angular-cli 集成
Integrating D3 with Angular-cli
我正在尝试将 D3 图表库与 Angular CLI 集成。首先,我使用 npm install d3 --save 安装了 d3。完成后我的 node_modules 看起来像
d3 版本是 "d3": "^4.2.2".
然后我设置如下配置。
angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
......
'd3/**/*'
]
});
};
系统-config.ts
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* 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[] = [
'core',
'button',
'icon',
'sidenav',
'toolbar',
'list',
'card'
];
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.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/bar',
'app/chart',
/** @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.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({map, packages});
在app.module.ts中,我导入了d3如下。
import * as d3 from 'd3';
然后,
@NgModule({
declarations: [AppComponent, d3],
providers: [],
imports: [],
bootstrap: [AppComponent],
})
以下是我的 dist 文件夹的内容,
当我尝试使用 ng build 构建项目时,出现以下错误。
Cannot find module 'd3'
非常感谢任何建议。
谢谢
您应该尝试将 d3 typings 添加到您的项目中,d3 不包括 typings,您必须获取它才能使用导入系统。
您可以:
使用 TypeScript Definition Manager 在您的项目中导入请求的类型:
typings install dt~d3 --global --save
然后您的 typings 目录中将有 d3 的定义文件。
参考angular-cli,可以使用npm安装typings :
npm install @types/d3 --save-dev
毕竟,您应该查看 d3 定义文件以确保它是最新版本 d3 的正确类型。
我正在尝试将 D3 图表库与 Angular CLI 集成。首先,我使用 npm install d3 --save 安装了 d3。完成后我的 node_modules 看起来像
d3 版本是 "d3": "^4.2.2".
然后我设置如下配置。
angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
......
'd3/**/*'
]
});
};
系统-config.ts
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* 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[] = [
'core',
'button',
'icon',
'sidenav',
'toolbar',
'list',
'card'
];
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.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/bar',
'app/chart',
/** @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.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({map, packages});
在app.module.ts中,我导入了d3如下。
import * as d3 from 'd3';
然后,
@NgModule({
declarations: [AppComponent, d3],
providers: [],
imports: [],
bootstrap: [AppComponent],
})
以下是我的 dist 文件夹的内容,
当我尝试使用 ng build 构建项目时,出现以下错误。
Cannot find module 'd3'
非常感谢任何建议。
谢谢
您应该尝试将 d3 typings 添加到您的项目中,d3 不包括 typings,您必须获取它才能使用导入系统。
您可以:
使用 TypeScript Definition Manager 在您的项目中导入请求的类型:
typings install dt~d3 --global --save
然后您的 typings 目录中将有 d3 的定义文件。
参考angular-cli,可以使用npm安装typings :
npm install @types/d3 --save-dev
毕竟,您应该查看 d3 定义文件以确保它是最新版本 d3 的正确类型。