Angular 5 with gantt 6.1.0

I’m upgrading gantt 6.0.2 to 6.1.0 and have an error when compiling

ERROR in node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(5,6): error TS2300: Duplicate identifier ‘GanttCallback’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(8,6): error TS2300: Duplicate identifier ‘GanttEventName’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2272,5): error TS2300: Duplicate identifier ‘export=’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2278,5): error TS2300: Duplicate identifier ‘export=’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(5,6): error TS2300: Duplicate identifier ‘GanttCallback’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(8,6): error TS2300: Duplicate identifier ‘GanttEventName’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2272,5): error TS2300: Duplicate identifier ‘export=’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2278,5): error TS2300: Duplicate identifier ‘export=’.

Please help.
Thanks

Hello,
It happens because the 6.1.0 version has included types, you don’t need types from “Definitely typed” repository anymore.
To fix the errors, you need to apply the following command:

npm uninstall @types/dhtmlxgantt -save-dev

And make sure that tsconfig.app.json file doesn’t contain the following string:

    "types": [
      "dhtmlxgantt"
]

It’s doesn’t work.

I have run

npm uninstall @types/dhtmlxgantt -save-dev

and check my tsconfig.json

{
“compileOnSave”: false,
“compilerOptions”: {
“outDir”: “./dist/out-tsc”,
“sourceMap”: true,
“declaration”: false,
“moduleResolution”: “node”,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“target”: “es6”,
“module”: “esnext”,
“typeRoots”: [
“node_modules/@types
],
“lib”: [
“es2016”,
“dom”
]
},
“skipLibCheck”: true
}

But error still happend

ERROR in node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(5,6): error TS2300: Duplicate identifier ‘GanttCallback’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(8,6): error TS2300: Duplicate identifier ‘GanttEventName’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2272,5): error TS2300: Duplicate identifier ‘export=’.
node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2278,5): error TS2300: Duplicate identifier ‘export=’.
src/app/shared/widgets/sm-gantt-chart/sm-gantt-chart.component.ts(9,30): error TS2306: File ‘node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts’ is not a module.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(5,6): error TS2300: Duplicate identifier ‘GanttCallback’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(8,6): error TS2300: Duplicate identifier ‘GanttEventName’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2272,5): error TS2300: Duplicate identifier ‘export=’.
src/assets/vendor/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts(2278,5): error TS2300: Duplicate identifier ‘export=’.

Hello,
You need to modify tsconfig.app.json, not tsconfig.json:
Before the uninstalling the types and removing them from tsconfig.app.json:

After the uninstalling the types and removing them from tsconfig.app.json:

1 Like

It’s my tsconfig.app.json

{
“extends”: “…/tsconfig.json”,
“compilerOptions”: {
“outDir”: “…/out-tsc/app”,
“baseUrl”: “./”,
“module”: “esnext”,
“types”: []
},
“exclude”: [
“test.ts”,
“**/*.spec.ts”
]
}

But error still happend

Hello,
Thank you for the clarification.
Let’s try deleting node_modules/@types/dhtmlx_gantt folder, maybe the types still remain there.
If that doesn’t help you, please send me your project as it seems that you might have something specific, but I cannot reproduce it.

1 Like

Thanks.

Because I store ‘dhtmlx-gantt’ professional folder inside project folder. I’ve exclude to build this folder in

tsconfig.app.json

It’s still have an error:

ERROR in src/app/shared/widgets/sm-gantt-chart/sm-gantt-chart.component.ts(9,30): error TS2306: File ‘/Volumes/…/projects/…/node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.d.ts’ is not a module.

Hello,
It is hard to suggest what might be wrong as I don’t see your code and I cannot reproduce the issue locally.
Maybe it happens because you launch Gantt from another Angular application, like this:

Main Angular Application
  Gantt + Angular
  Export + Angular
  Custom Angular App

Maybe it happens because Gantt loads before another component.
Or maybe there is something else.

Here is what I found regarding that error:

Hi,
we’ve just updated our angular demo on the github to gantt 6.1

Can you please check it to see if it helps?

As for the error

ERROR in src/app/shared/widgets/sm-gantt-chart/sm-gantt-chart.component.ts(9,30)

can you pls show the line of code where it’s thrown?

Please tell my what’s the correct way to import gantt 6.1.0 in angular. I found 2 ways in two example

The first time I follow by gantt documentation => error :frowning:
Now, I follow by angular example project as you mention => correct :slight_smile:

in gantt documentation

in your sample project

Hello Long,
Both ways should work, but only the second one works.
The dev team will fix it in the future.

1 Like

Yes, right now there is an issue with our type definitions. We’ll try to update them shortly.

1 Like

Is the es6 import now working ?

1 Like

It’s worked :slight_smile:

Hello,
Looks like it doesn’t work in the current version (6.3.4). I added it as a bug in our internal tracker, and it will be fixed in the future. Unfortunately, I cannot give you any ETA.

Hello,
The dev team fixed the issue in the 7.0.0 version:
https://docs.dhtmlx.com/gantt/whatsnew.html#x4466x70x4467x