Cannot read property 'addEventListener' Error

Gantt
#1

I am following this tutorial on how to implement the gantt chart into my angular application.
https://dhtmlx.com/blog/dhtmlx-gantt-chart-usage-angularjs-2-framework/

I get this error when I try initializing the gantt

ERROR TypeError: Cannot read property ‘addEventListener’ of null
at dhtmlxgantt.js:9
at Object.t._reinit (dhtmlxgantt.js:9)
at Object.t.init (dhtmlxgantt.js:9)

Previously I had an error with:

import {} from “@types/dhtmlxgantt”;

It said “index.d.ts is not a module” so I commented that import statement out, went into the index.d.ts file inside @types/dhtmlxgantt and replaced:

declare var gantt: GanttStatic;

WITH

declare let gantt: any;

Is the error I’m getting related to this change?

Thanks

#2

Hello,
It is hard to suggest what might be wrong as I don’t see your code.
I tried to follow the steps from the article, but I don’t get that error. Recently, the typings were updated, and now they should work correctly with the latest Typescript version.
You can try to uncomment the following string:

import {} from “@types/dhtmlxgantt”;

And then update the typings:

npm install

If that doesn’t help you, please send me your project so that I can reproduce the issue locally, or give me the steps to reproduce the issue.

#3

Hi,

I have updated the type definitions but I am still getting an error.

gantthelp
gantthelp918×672 29 KB

I am currently running typescript version 3.1.6.

If there is any other code you would like to see please let me know.

Thanks

#4

Hello,
Thank you for the clarification.
The method I suggest should work in Angular 2+ version.
For 5.x+ there is another method and it should work correctly with the latest typescript version. You need to install the types manually:

npm install @types/dhtmlxgantt@^6.0.0 -save-dev

After that, open angular-project-folder/src/tsconfig.app.json file and include dhtmlxgantt inside the types array:

If that still doesn’t help you, please send me your angular project or reproduce it in another project and send it to me.

#5

Hi,

I tried your approach but I am still getting the same error.

This is a sample project that produces the same error.
https://github.com/itsUnkn0wnn/angular-project

And these are the versions of everything I’m currently using.

gantthelp3
gantthelp3808×489 34.4 KB

Thanks

#6

Hello,
Thank you for sending the project.
You don’t need the following string as the method I suggested is for Angular 2:
import {} from “@types/dhtmlxgantt”;
I removed that string and connected the styles because Gantt wasn’t correctly displayed on the page. Here is the updated project:
https://files.dhtmlx.com/30d/ddbb4042fcea77f5cd95b098371ad2e0/angular7+gantt.zip

If I reinitialize Gantt without specifying the container, I get an error (that is different but similar to yours). You need to specify the container’s ID or HTML element, and it should work correctly.
You can try adding a few tasks, then applying the following code to check that everything works correctly:

//hide the grid:
gantt.config.show_grid = false;

// reinit gantt:
var gantt_container = document.getElementsByClassName("gantt_container")[0].parentNode
gantt.init(gantt_container)

Usually, you don’t need to reinitialize Gantt to hide the grid, instead of that, you can use gantt.render(), but it just shows that Gantt was reinitialized.
You can read more about gantt.init() command in the following article:
https://docs.dhtmlx.com/gantt/api__gantt_init.html

#7

I get this error when I did what you told me.

ERROR: Argument of type ‘Node & ParentNode’ is not assignable to parameter of type ‘string | HTMLElement’. Type ‘Node & ParentNode’ is missing the following properties from type ‘HTMLElement’: accessKey, accessKeyLabel, autocapitalize, dir, and 176 more.ts(2345)

Can you show me exactly what you did because I made those changes but it still isn’t working. Not sure if I did it correctly. In the file you have linked the only change I see is the removal of the types/dhtmlxgantt import statement

#8

Hello,
You need to apply the following command:

npm install @types/dhtmlxgantt@^6.0.0 -save-dev

Then update angular-project-folder/src/tsconfig.app.json file:

#9

I have made those changes but it still isn’t working.

Can you send me a working angular 7 project so I can see what I did wrong?

#10

Hello,
Here it is:

After downloading it, apply the following command:

npm install