CODEWITHSUNDEEP
angularag-griddotnetnukeag-grid-angulardnn9
Jeff
Jeff

Reputation: 1

ag-grid-angular error: TypeError: Cannot read properties of undefined (reading 'addEventListener')

I am using Angular 18.2.0 & ag-grid-angular/ag-grid-community 32.1.0. If I run using "ng serve" the ag-grid works. But as soon as I put it on an existing page, the 1st error is "TypeError: Cannot read properties of undefined (reading 'addEventListener')" from ag-grid-comminity/dist/package/main.esm.mjs line: 37866. Any ideas on a fix? I have other AngularJS pages using ag-grid JS just fine. But this is my 1st Angular app, so I could be doing something wrong.

    function addEventListener(beans, eventType, listener) {
      beans.apiEventService.addEventListener(eventType, listener);
    }

Chrome debugger error

    ng serve

stand alone page working

Upvotes: 0

Views: 495

Answers (1)

Jeff
Jeff

Reputation: 1

If it help, looks like the 2nd call in the stack is from @angular 18.2.0.

1st thing in the call stack is ag-grid, from node_modules\ag-grid-community\dist\ag-grid-community.js?

// community-modules/core/src/api/eventApi.ts
function addEventListener(beans, eventType, listener) {
  beans.apiEventService.addEventListener(eventType, listener);
}

enter image description here

/** Cached result of whether the user's browser supports passive event listeners. */
let supportsPassiveEvents;
/**
 * Checks whether the user's browser supports passive event listeners.
 * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 */
function supportsPassiveEventListeners() {
  if (supportsPassiveEvents == null && typeof window !== 'undefined') {
    try {
      window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
        get: () => supportsPassiveEvents = true
      }));
    } finally {
      supportsPassiveEvents = supportsPassiveEvents || false;
    }
  }
  return supportsPassiveEvents;
}

Only thing loaded is:

"dependencies": {
  "@angular/animations": "^18.2.2",
  "@angular/cdk": "^18.2.2",
  "@angular/common": "^18.2.0",
  "@angular/compiler": "^18.2.0",
  "@angular/core": "^18.2.0",
  "@angular/forms": "^18.2.0",
  "@angular/material": "^18.2.2",
  "@angular/platform-browser": "^18.2.0",
  "@angular/platform-browser-dynamic": "^18.2.0",
  "@angular/router": "^18.2.0",
  "ag-grid-angular": "^32.1.0",
  "ag-grid-community": "^32.1.0",
  "rxjs": "~7.8.0",
  "zone.js": "~0.14.10"
},

Is there a supported way I can override node_modules\ag-grid-community\dist\ag-grid-community.js &/or node_modules\ag-grid-community\dist\package\main.esm.mjs?

Upvotes: 0

Related Questions