feat: allow AngularFire to be used in a zoneless angular application

[eneajaho]

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[RobbyRabbitman]

If your app only uses the DI feature of angular/fire, you can build your own providers e.g like that:

import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
import { Auth, connectAuthEmulator, getAuth } from 'firebase/auth';
import {
  Firestore,
  connectFirestoreEmulator,
  getFirestore,
} from 'firebase/firestore';
import { createNoopInjectionToken } from 'ngxtension/create-injection-token';

export const [firebaseApp, provideFirebaseApp] =
  createNoopInjectionToken<FirebaseApp>('[Firebase] App');

export const [firestore, provideFirestore] =
  createNoopInjectionToken<Firestore>('[Firebase] Firestore');

export const [firebaseAuth, provideFirebaseAuth] =
  createNoopInjectionToken<Auth>('[Firebase] Auth');

export interface FirebaseConfig {
  options: FirebaseOptions;
  features?: Partial<{
    auth: {
      emulators?: { host: string; port: number };
    };
    firestore: {
      emulators?: { host: string; port: number };
    };
  }>;
}

export function provideFirebase({ options, features }: FirebaseConfig) {
  const app = initializeApp(options);
  const providers = [provideFirebaseApp(app)];

  for (const feature in features) {
    switch (feature) {
      case 'auth': {
        const auth = getAuth(app);
        providers.push(provideFirebaseAuth(auth));

        const emulators = features[feature]?.emulators;

        if (emulators) {
          connectAuthEmulator(
            auth,
            `http://${emulators.host}:${emulators.port}`,
          );
        }

        break;
      }
      case 'firestore': {
        const firestore = getFirestore(app);
        providers.push(provideFirestore(firestore));

        const emulators = features[feature]?.emulators;

        if (emulators) {
          connectFirestoreEmulator(firestore, emulators.host, emulators.port);
        }

        break;
      }
    }
  }

  return providers;
}

[spock123]

This is super important, we're about to go zoneless for our app but this is blocking us, unfortunately.

[vzsolt1981]

As a workaround, you could provide zoneless change detection for Angular itself and leave zone.js in polyfills for Fire, until it gets sorted out.

[spock123]

Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.

[vzsolt1981]

Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.

Works for me, hence the suggestion. Good luck!

[spock123]

Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.

Works for me, hence the suggestion. Good luck!

How did you actually do it? I have been playing with it a bit, but just adding ZoneJS to @angular/fire did not work - I guess I have to re-build angular/fire again?

In the zones.d.ts, NgZone is imported from @angular/core - how did you deal with all this? Thanks

[vzsolt1981]

Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.

Works for me, hence the suggestion. Good luck!

How did you actually do it? I have been playing with it a bit, but just adding ZoneJS to @angular/fire did not work - I guess I have to re-build angular/fire again?

In the zones.d.ts, NgZone is imported from @angular/core - how did you deal with all this? Thanks

I'm not sure about your approach, it's 2 changes you have to make as per my initial suggestion:

1. Add (or leave it there) zone.js to polyfills in your app's angular.json (w/o nx) or project.json (w nx):

"polyfills": ["zone.js"],

2. Add zoneless change detection provider to your app's app.config.ts:

import {
  ApplicationConfig,
  ɵprovideZonelessChangeDetection as provideZonelessChangeDetection,
} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    ...,
    provideZonelessChangeDetection(),
  ],
};

[eneajaho]

Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.

Works for me, hence the suggestion. Good luck!

How did you actually do it? I have been playing with it a bit, but just adding ZoneJS to @angular/fire did not work - I guess I have to re-build angular/fire again? In the zones.d.ts, NgZone is imported from @angular/core - how did you deal with all this? Thanks

I'm not sure about your approach, it's 2 changes you have to make as per my initial suggestion:

1. Add (or leave it there) zone.js to polyfills in your app's angular.json (w/o nx) or project.json (w nx):

"polyfills": ["zone.js"],

2. Add zoneless change detection provider to your app's app.config.ts:

import {
  ApplicationConfig,
  ɵprovideZonelessChangeDetection as provideZonelessChangeDetection,
} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    ...,
    provideZonelessChangeDetection(),
  ],
};

Can confirm this works well for the moment!

Thanks 🤩

[spock123]

Ahh thanks guys. I had totally removed zonejs in the app. So I guess leave that in polyfills (too bad) but disable it in the config (good).

Cheers

Update: it works, thanks for all the good advice

Update2: it works yes, but it breaks if you are using other libraries that now think ZoneJS provides change detection, which is doesn't. Example: ngx-toastr now thinks ZoneJS exists (it checks I guess) and tries to use that, with an error to follow.

Unfortunately it seems this project is kinda dead-ish, anyone knows if we can use Angular without @angular/fire, and still use Firebase?

[Meistercoach83]

@spock123 did you find a solution?

[lazmeister]

Unfortunately it seems this project is kinda dead-ish, anyone knows if we can use Angular without @angular/fire, and still use Firebase?

You definitely can, if this project doesn't get support we might be heading that way too (Angular with firebase)

[spock123]

@Meistercoach83 not been able to work on it yet but I don't think there's any issue using the Native firebase library. We use Auth a lot so that part will have to be a bit re-written, as we have used the observable parts as integration with Ngrx/Store.

When I get time and if I make it work I'll make sure to post it here. It's a pity, I really like @angular/fire

[Meistercoach83]

@jamesdaniels is this project dead?

[floinay]

when?

[spock123]

@Meistercoach83 I think he mentioned he's working on adding support for zoneless. Also version 18.0.1 just came out (angular/fire), we've updated and it works well (just not with zoneless yet, but you can go zoneless and add zonejs to polyfills)

We moved away from the 3rd party libraries that broke when zoneJS was missing