AngularFire v18 ng serve error when using zoneless change detection: Zone is not defined

[anisabboud]

Version info

Angular: 18.0.0
AngularFire: 18.0.0
Firebase: 10.12.1

How to reproduce these conditions

Follow the Angular 18 guide to enable zoneless:

1. Add provideExperimentalZonelessChangeDetection() to providers.
2. remove zone.js from polyfills in angular.json.
3. Run ng serve

https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

Debug output

Error in the terminal Zone is not defined

/myproject/node_modules/@angular/fire/fesm2022/angular-fire.mjs:101
    this.outsideAngular = ngZone.runOutsideAngular(() => new ɵZoneScheduler(Zone.current));
                                                                            ^


ReferenceError: Zone is not defined
    at eval (/myproject/node_modules/@angular/fire/fesm2022/angular-fire.mjs:101:77)
    at input (/myproject/node_modules/@angular/core/fesm2022/core.mjs:15827:16)
    at _ɵAngularFireSchedulers (/myproject/node_modules/@angular/fire/fesm2022/angular-fire.mjs:101:34)
    at Object._ɵAngularFireSchedulers_Factory (/myproject/node_modules/@angular/fire/fesm2022/angular-fire.mjs:106:12)
    at eval (/myproject/node_modules/@angular/core/fesm2022/core.mjs:3233:47)
    at runInInjectorProfilerContext (/myproject/node_modules/@angular/core/fesm2022/core.mjs:871:9)
    at R3Injector.hydrate (/myproject/node_modules/@angular/core/fesm2022/core.mjs:3232:21)
    at R3Injector.get (/myproject/node_modules/@angular/core/fesm2022/core.mjs:3095:33)
    at injectInjectorOnly (/myproject/node_modules/@angular/core/fesm2022/core.mjs:1106:40)
    at ɵɵinject (/myproject/node_modules/@angular/core/fesm2022/core.mjs:1112:42)

Node.js v20.13.1

Expected behavior

AngularFire/ng serve should work with the new zoneless change detection introduced in Angular v18.
https://angular.dev/guide/experimental/zoneless

Actual behavior

ng serve crashes when opening localhost:4200.

[spock123]

@anisabboud it's because @angular/fire code expects zoneJS to be present. What you can do is this workaround (although not perfect solution): keep zoneJS in your polyfills, but still use zoneless change detection. This will work, but of course zoneJS will still be part of your initial payload. At least you won't be using it.
It would be nice if the code using zoneJS could check for existence of it before blindly using it. That would solve thing I guess.

But to be clear: we are running zoneless without issues - the only thing is that we have to keep zoneJS in polyfills, but that's it. It's still zoneless, but of course the initial payload is a tiny bit larger than it should have been. But this is a small price to pay to move to zoneless, we'll get to remove zonejs eventually I am sure.

[jamesdaniels]

We're working to support Zoneless Angular in an upcoming release

[spock123]

@jamesdaniels did I say you rock? you do

[duxor]

The same topic is here: #3494

[kiakahaDZ]

any solution found plz i have the same issue

[Benzilla]

Eagerly waiting on this - AngularFire is the only package currently stopping us from going zoneless