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?