Comments (14)
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:
- 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"],
- 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(),
],
};
from angularfire.
This is super important, we're about to go zoneless for our app but this is blocking us, unfortunately.
from angularfire.
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? ThanksI'm not sure about your approach, it's 2 changes you have to make as per my initial suggestion:
- 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"],
- 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 🤩
from angularfire.
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;
}
from angularfire.
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)
from angularfire.
@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
from angularfire.
This issue does not seem to follow the issue template. Make sure you provide all the required information.
from angularfire.
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.
from angularfire.
Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.
from angularfire.
Hi @vzsolt1981 , that would be worth tryin actually. Thanks, I could try it.
Works for me, hence the suggestion. Good luck!
from angularfire.
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
from angularfire.
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?
from angularfire.
@spock123 did you find a solution?
from angularfire.
@jamesdaniels is this project dead?
from angularfire.
Related Issues (20)
- Deployment to Google Cloud Run using Angular v17 Application Builder not working
- [error] AssertionError [ERR_ASSERTION]: catch clause variable is not an Error instance HOT 2
- Appcheck on Angular 17 does not work! HOT 3
- How to tell FCM to load the firebase-messaging-sw file in a different call route(href)? in @angular/fire (FCM) HOT 1
- where is firestore.fieldValue? HOT 1
- After updating angular cli and angular core to 15, I'm getting error in firebase as no firebase app default has been created HOT 1
- serverTimestamp fails when uploading to firestore. HOT 2
- Can't set custom lang to email templates HOT 2
- Unhandled Promise rejection Analytics with SSR HOT 1
- [Android] Firestore snapshot listeners is slow to retrieve data.
- Compat sample does not compile
- Either AngularFireModule has not been provided in your AppModule HOT 1
- [Angular 15 + Firebase 7] Build in production mode error: Component auth has not been registered yet HOT 1
- Unable to load dynamic firebase config, tried many ways but fail to load. HOT 2
- AngularFire 17.1.0 breaks - Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource' HOT 10
- fireMessaging.tokenChanges emit wrong(not equeal) fcm token after fireMessaging.requestToken HOT 1
- vertexai-preview Module '"@firebase/app"' has no exported member '_FirebaseService' HOT 1
- GoogleAuthProvider not exported anymore in v18 HOT 9
- AngularFire v18 ng serve error when using zoneless change detection: Zone is not defined HOT 3
- Missing exports in v18? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angularfire.