Angular 2定义文件

Question

我有一个基于d3的自定义甘特图库。它是用普通的javascript编写的。现在我想将它添加到我的Angular 2应用程序中。我已经通过npm安装了D3并为node_modules添加了一个类型文件以及甘特图，但是我收到以下错误消息：

__WEBPACK_IMPORTED_MODULE_4_d3__.gantt is not a function

我认为这是因为导出和定义文件的使用错误。但我不知道如何解决它。

node_modules / D3 / index.js：

export {version} from "./build/package";
export * from "d3-array";
.
.
.
export * from "d3-gantt";

node_modules / D3的甘特/ index.js：

export default gantt;

function gantt()
{
    // a lot of code
    return gantt
}

node_modules/@types/d3/index.d.ts：

export as namespace d3;
export * from 'd3-array';
.
.
.
export * from 'd3-gantt';

node_modules/@types/d3-gantt/index.d.ts：

export function gantt(): any;

的src /应用程序/ AppComponent.ts

buildGantt(){
...
import * as d3 from 'd3'
d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).selector('#d3Chart') //here i get the error
...
}

Answer 1

• 在app目录中添加javascript文件夹
• 将d3-gantt文件夹放在那里
• 除正常代码外，还添加index.d.ts行：export function gantt(): any;
• 在您的app.components.ts中添加import { gantt } from "./javascript/d3-gantt";
• 在tsconfig.json
中设置"allowJs":true,

为我这样工作