-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: allow AngularFire to be used in a zoneless angular application #3494
Comments
This issue does not seem to follow the issue template. Make sure you provide all the required information. |
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;
} |
This is super important, we're about to go zoneless for our app but this is blocking us, unfortunately. |
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. |
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? In the zones.d.ts, NgZone is imported from @angular/core - how did you deal with all this? |
I'm not sure about your approach, it's 2 changes you have to make as per my initial suggestion:
|
Can confirm this works well for the moment! Thanks 🤩 |
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? |
@spock123 did you find a solution? |
You definitely can, if this project doesn't get support we might be heading that way too (Angular with firebase) |
@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 |
@jamesdaniels is this project dead? |
when? |
@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 |
The text was updated successfully, but these errors were encountered: