Error using Zoneless change detection

[spock123]

Hi,

• Toastr works great - however when adding the new Zoneless changedetection in Angular 18, I get this error when trying to create a toast:

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'display': 'none'. Current value: 'undefined'. Expression location: _Toast component.

Any ideas what it could be? Thanks

As soon as I enable normal zoneJs again, it works without errors

[spock123]

After looking at the source code I guess it's due to the use of NgZone in the. toastr.component.ts file.

[spock123]

Back again - sorry for the spam. I actually think the reason is that , due to Angular/Fire issues, we had to keep ZoneJS in the angular.json polyfills, and still use the zoneless change detector.

For some reason this seems to mean ngx-toastr thinks ZoneJS is present, even though there is no change detection running.

Would it be a big task to make wether to use zoneJS or not, a configuration setting when providing the module?
THen we could manually specify wether to use zoneJS or not, instead of relying the library to "guess".

[kemotx90]

I think the best approach is fully remove Zone.js dependency from ngx-toastr

As Angular moves towards a zoneless application development model, Zone.js is no longer accepting new features, including additional patches for native platform APIs.
https://www.npmjs.com/package/zone.js#development-status-of-zonejs

[spock123]

@kemotx90 I agree. In the mean time I switch to https://www.npmjs.com/package/@ngneat/hot-toast which doesn't use zone at all

[atscott]

Hi, Angular team member here. This isn’t related to the component’s use of NgZone. The run and runOutsideAngular methods are fine to use in Zoneless. https://angular.dev/guide/experimental/zoneless#requirements-for-zoneless-compatibility

The error message indicates that issue is the toast component is not following the rules of OnPush change detection and updating state without marking itself for check. This host binding seems the likely cause:

ngx-toastr/src/lib/toastr/toast.component.ts

Line 72 in 3d8ef10

if (this.state.value === 'inactive') {

This is a pretty straightforward fix: use signals for state read in templates or call remember to call ChangeDetectorRef.markForCheck when updating the state.

[kemotx90]

zone.js is under deprecation by the angular team.
Remove it from dependencies and use another approach is the best solution for LTS