I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I encountered the following error:
__WEBPACK_IMPORTED_MODULE_4_d3__.gantt is not a function
I suspect that this error is due to incorrect export and definition file usage, but I am unsure how to resolve it.
Here are snippets of relevant code:
node_modules/d3/index.js:
export {version} from "./build/package";
export * from "d3-array";
.
.
.
export * from "d3-gantt";
node_modules/d3-gantt/index.js:
export default gantt;
function gantt()
{
// implementation details
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/app/AppComponent.ts
buildGantt(){
...
import * as d3 from 'd3'
d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).selector('#d3Chart') //here i get the error
...
}