Cannot read property 'addEventListener' Error


#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.

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.

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