我正在尝试将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/**/*'
]
});
};
系统配置
"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类型添加到您的项目中,d3不包括类型,并且必须获取它才能使用导入系统。
您可以 :
使用TypeScript定义管理器,以便在您的项目中导入请求的输入:
typings install dt~d3 --global --save
然后,您的输入目录中将具有d3的定义文件。
指angular-cli,您可以使用npm安装类型:
npm install @types/d3 --save-dev
毕竟,您应该查看d3定义文件,以确保这是最新版本d3的正确键入。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句