Description
When provideZoneChangeDetection({ eventCoalescing: true }) is enabled in an Angular application, igx-radial-gauge throws a runtime TypeError if the component is destroyed immediately after the initial render.
In the attached reproduction sample, igx-radial-gauge is placed inside an Angular @if block. The condition is changed from true to false immediately after initialization, causing the gauge component to be destroyed shortly after it is created.
It appears that igx-radial-gauge schedules some asynchronous rendering or font/CSS-related processing during initialization. If the component is destroyed before that delayed processing runs, the internal code attempts to access an already disposed or null object.
Error
radial-gauge.html:1 ERROR TypeError: Cannot read properties of null (reading 'startCSSQuery')
at _FontUtil.getFontForClass (IRenderer_combined.js:307:11)
at _FontUtil.getFont (IRenderer_combined.js:382:25)
at _XamRadialGauge.bp (XamRadialGauge_combined.js:1859:29)
at _XamRadialGauge.i4 (XamRadialGauge_combined.js:1560:22)
at _XamRadialGauge.im (XamRadialGauge_combined.js:846:18)
at _XamRadialGaugeView.ag (XamRadialGauge_combined.js:2331:20)
at ret (type.js:1428:21)
at timer (zone.js:1491:27)
at _ZoneDelegate.invokeTask (zone.js:384:171)
at _pending_tasks-chunk.mjs:2389:49
Framework
Angular
Angular Version
21.2.0
Ignite UI for Angular Version
21.1.0
Component / Area
Other
Browser
Chrome
Operating System
Windows
Command Not Working
Steps to Reproduce
- Run the attached application.
- The runtime error occurs shortly after the gauge is destroyed.
Actual Result
A runtime TypeError is thrown:
Cannot read properties of null (reading 'startCSSQuery')
Expected Result
Destroying igx-radial-gauge shortly after initial rendering should not throw an error.
Reproduction URL
No response
Attachments
example-app-g.zip
Description
When provideZoneChangeDetection({ eventCoalescing: true }) is enabled in an Angular application, igx-radial-gauge throws a runtime TypeError if the component is destroyed immediately after the initial render.
In the attached reproduction sample, igx-radial-gauge is placed inside an Angular @if block. The condition is changed from true to false immediately after initialization, causing the gauge component to be destroyed shortly after it is created.
It appears that igx-radial-gauge schedules some asynchronous rendering or font/CSS-related processing during initialization. If the component is destroyed before that delayed processing runs, the internal code attempts to access an already disposed or null object.
Error
radial-gauge.html:1 ERROR TypeError: Cannot read properties of null (reading 'startCSSQuery')
at _FontUtil.getFontForClass (IRenderer_combined.js:307:11)
at _FontUtil.getFont (IRenderer_combined.js:382:25)
at _XamRadialGauge.bp (XamRadialGauge_combined.js:1859:29)
at _XamRadialGauge.i4 (XamRadialGauge_combined.js:1560:22)
at _XamRadialGauge.im (XamRadialGauge_combined.js:846:18)
at _XamRadialGaugeView.ag (XamRadialGauge_combined.js:2331:20)
at ret (type.js:1428:21)
at timer (zone.js:1491:27)
at _ZoneDelegate.invokeTask (zone.js:384:171)
at _pending_tasks-chunk.mjs:2389:49
Framework
Angular
Angular Version
21.2.0
Ignite UI for Angular Version
21.1.0
Component / Area
Other
Browser
Chrome
Operating System
Windows
Command Not Working
Steps to Reproduce
Actual Result
A runtime TypeError is thrown:
Cannot read properties of null (reading 'startCSSQuery')
Expected Result
Destroying igx-radial-gauge shortly after initial rendering should not throw an error.
Reproduction URL
No response
Attachments
example-app-g.zip