Repository navigation
Angular v21 support #3678
Description
Activity
Also interested in the timeline, but i realize it takes time :)
Reacted by Marian SorcaYeah, I'm currently using Angular v21 with @angular/fire with
--legacy-peer-depsfor now.Reacted by Alesandro Della Janna and Marian SorcaAny news on this? This should have been taken care from day 1 since it is the same company
Reacted by Jake Smith, Elyahu Borodin, DenysTrotsenko, Dmitry, Dave Ryder and Guillaume21.0.0-rc.0was just cut, give it a shot. Apologies for the delay, our release process is quite different than Angular's as we're not part of the monorepo.Reacted by tom2allReacted by Alvaro, Marian Sorca, Elyahu Borodin, Guillaume, Jeevan Mahesha, Alexandre Szczepaniak and Rafael TavaresReacted by Alesandro Della Janna, Vireth, Jake Smith, Elyahu Borodin, Genaro Cancino, Alexandre Szczepaniak, Rafael Tavares and ScottReacted by Michael Prentice@jamesdaniels highly appreciating your dedication, thank you!!
Hmm the 21.0.0-rc.0 released last week is not yet stable enough.
Do we know when a stable version will be released?Reacted by Dmitry and Echo343There seem to be far fewer maintainers than in the first release, and there is no way to set up the MVP with the Angular 21 upgrade before the holidays. Hopefully it won’t end up on killedbygoogle.com.
Reacted by Dmitry and Omar CrespoReacted by Marian Sorca, tom2all and Ruben HeymansReacted by Niall CarrollPR got merged. #3674
we can expect in few weeks
Reacted by Kalamar74 and Yu InoueReacted by Marian SorcaReacted by Sebastián Rojas RicaurteDo we have any news on this?
Reacted by Jeevan Mahesha, Luke Rogers, Naveen Jose, bdirito, David P, Rafael Tavares, djamn, Carter Moore, Thomas Mclennan, Leonardo Serra and 11 moreJust wondering if there is any update on upgrading this library to support Angular 21. It's going to be two months since google released v21 of angular and this is not yet updated. I appreciate everyone's support to keep this library running, but can updated be posted here periodically so that we know what to expect?
Reacted by Marian Sorca, David Bowdoin, Yu Inoue, Donald Averill, Daniel Schultz, Philipp Bauer, mqrten, Igor, YouZag, Jeevan Mahesha and 5 moreReacted by Yu Inoue and Marian SorcaReacted by Patric Steiner and Marian SorcaRighteo, the RC was cut in Nov soooooo, just gonna come right out and ask it..... is Angular Fire dead?
Reacted by Jake SmithReacted by Marian Sorca, Matthias Keller, woutersteven, tom2all and Sebastián Rojas RicaurteReacted by Yu Inoue and Marian SorcaReacted by Maxim Wilman and Marian Sorca@jamesdaniels any update on the release date ?
Reacted by Yu Inoue, Daniel Waghubinger, Marian Sorca, Scott, David, Marco Celotti, Niall Carroll, Thomas Gangsøy, tom2all and Jake SmithCan anyone message someone from the Angular team and tell them about this?
Any more info @jamesdaniels ?
Reacted by Peter KunsztFollowing up here as well, I am hitting the problem that applications (in the age of AI) need to be updated more often than before, and this is becoming a problem with packages that don't update often enough. For my situation, the lack of communication also doesn't help, so am looking at alternatives to angular/fire and even firebase itself. There may be no choice but to move to Supabase for authentication, database and storage. Their update cycle is much more frequent.
This is not a complaint, just saying that speed of iteration is becoming much faster and packages that block it for too long will have to be phased out. I'm sure this also affects others. If there is a timeline for an update, it would be nice if it is communicated. If i go to the support channels listed in the readme, most are years old, or not updated regularly, or simply not existing anymore.
Reacted by Patrick McDonald, Donald Averill, Alvaro, Peter Kunszt, Chris Jones, Scooby27, Krzysztof Kachniarz, Alexandre Szczepaniak, Marian Sorca, Yu Inoue and 4 more20 remaining items
Sure! The approach is straightforward just two small files, no library needed.
1. DI Provider – Create injection tokens + a provideFirebase() function using
makeEnvironmentProviders:import { InjectionToken, makeEnvironmentProviders } from '@angular/core';
import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
import { Auth, getAuth } from 'firebase/auth';
import { Firestore, getFirestore } from 'firebase/firestore';export const FIREBASE_APP = new InjectionToken('FirebaseApp');
export const FIREBASE_AUTH = new InjectionToken('FirebaseAuth');
export const FIRESTORE = new InjectionToken('Firestore');export function provideFirebase(config: FirebaseOptions) {
return makeEnvironmentProviders([
{ provide: FIREBASE_APP, useFactory: () => initializeApp(config) },
{ provide: FIREBASE_AUTH, deps: [FIREBASE_APP], useFactory: (app: FirebaseApp) => getAuth(app) },
{ provide: FIRESTORE, deps: [FIREBASE_APP], useFactory: (app: FirebaseApp) => getFirestore(app) },
]);
}
2. RxJS Helpers – A generic bridge that converts any Firebase listener into a shared Observable:import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';export function fromFirebaseListener(
subscribe: (next: (value: T) => void, error: (err: unknown) => void) => () => void,
): Observable {
return new Observable((subscriber) => {
const unsubscribe = subscribe(
(v) => subscriber.next(v),
(e) => subscriber.error(e),
);
return () => unsubscribe();
}).pipe(shareReplay({ bufferSize: 1, refCount: true }));
}
Use it to wrap any Firebase callback (onAuthStateChanged,onSnapshot,onValue, etc.):import { Auth, onAuthStateChanged, User } from 'firebase/auth';
export const authState$ = (auth: Auth) =>
fromFirebaseListener<User | null>((next, error) => onAuthStateChanged(auth, next, error));
Wire it up in app.config.ts:provideFirebase(environment.firebase)
Inject & use anywhere:private auth = inject(FIREBASE_AUTH);
user = toSignal(authState$(this.auth), { initialValue: null });I'm sorry. This is very helpful, it took me half way to removal of angular fire in my app, but... my app prevents users from navigating to any component until they have logged in, so basically the first and only page you see is the login page until you successfully log in. What is the best way to create a CanActivate guard like the one that Angular Fire includes just using the SDK?
Reacted by Ruben Heymansnews?
Alternative to @angular/fire for Angular 22+ and Native Firebase JS SDK 12+
Like many of you, our team faced significant roadblocks when upgrading our production projects to Angular 22+ and the latest Firebase JS SDK v12+ due to the current maintenance status and delayed updates of @angular/fire.
Instead of waiting, we decided to build and publish a lightweight, zoneless-friendly, and modern alternative: ngx-firebase.
We have just released version 22.0.1 and integrated it into our own production monorepo, and we wanted to share it with the community to help others get unstuck.
⚡ What is ngx-firebase?
It is a drop-in, lightweight DI wrapper around the official Firebase JS SDK (v12+) built specifically for Angular 22+.🌟 Key Features:
Fully Compatible: Built from the ground up for Angular 22+ and the latest Firebase JS SDK v12+.
Zoneless-Friendly: Works seamlessly in modern Angular applications running without Zone.js.
Zero API Bloat / Developer Autonomy: It does not try to reinvent or hide the native Firebase API. You import native Firebase methods directly (getFirestore, signInWithEmailAndPassword, etc.) and use ngx-firebase strictly for Angular Dependency Injection and reactive RxJS helper wrappers (docData, collectionSnapshots, user, etc.).
Future-Proof: If Firebase releases a new SDK update tomorrow, you don't have to wait for a library update; you can immediately use any new native Firebase features alongside our DI wrappers.
📦 Quick Start:
bash
npm install ngx-firebase firebase
🔗 Links & Resources:
GitHub Repository: quedicesebas/ngx-firebase
NPM Package: ngx-firebase
We are actively maintaining this project and would love to hear your feedback, issues, or pull requests to make it even better. Let's keep moving the Angular + Firebase ecosystem forward! 🚀Reacted by David Bowdoinwell that's really nice thanks for you work, however I it's still no official repo and I assume firebase will release one sooner or later so idk how useful it will be in the long run
It has been a year and two major Angular versions without releases... we cannot tolerate that. Everyone is invited to contribute to the ngx-firebase repo.
Reacted by David BowdoinThanks for the patience here, and I hear the frustration in the thread about the gap.
Angular 21 support exists as a release candidate,
21.0.0-rc.0, published on npm'snexttag (npmlatestis still20.0.1). You can install it with:npm i @angular/fire@nextTwo caveats so you are not surprised. First, this rc targets Angular 21 specifically: it peers
@angular/core ^21, so if your app is already on Angular 22 it will not install (that is a separate effort, not covered by this rc). Second,21.0.0-rc.0still carries an unused@angular/platform-browser-dynamicpeer (issue #3667), so on Angular 21 you may still need--legacy-peer-depsfor now, especially if your app is not on the very latest 21.x patch; the fix that removes that peer is merged (#3718) and will land in the next release candidate. I want to be straight that this is a release candidate under active stabilization, not a finished stable release, and I am not going to put a date on the stable cut here.Work has been landing on that line since the rc (for example the injection-context docs and
ng addschematic fixes), and I would rather get concrete bug reports against@angular/fire@nextthan have people stuck on--legacy-peer-deps. If you try the rc and hit specific issues, please file them; that is what moves it toward stable.Reacted by rala, David Haley, Ruben and Thomas MclennanThanks for the patience here, and I hear the frustration in the thread about the gap.
Angular 21 support exists as a release candidate,
21.0.0-rc.0, published on npm'snexttag (npmlatestis still20.0.1). You can install it with:npm i @angular/fire@nextTwo caveats so you are not surprised. First, this rc targets Angular 21 specifically: it peers
@angular/core ^21, so if your app is already on Angular 22 it will not install (that is a separate effort, not covered by this rc). Second,21.0.0-rc.0still carries an unused@angular/platform-browser-dynamicpeer (issue #3667), so on Angular 21 you may still need--legacy-peer-depsfor now, especially if your app is not on the very latest 21.x patch; the fix that removes that peer is merged (#3718) and will land in the next release candidate. I want to be straight that this is a release candidate under active stabilization, not a finished stable release, and I am not going to put a date on the stable cut here.Work has been landing on that line since the rc (for example the injection-context docs and
ng addschematic fixes), and I would rather get concrete bug reports against@angular/fire@nextthan have people stuck on--legacy-peer-deps. If you try the rc and hit specific issues, please file them; that is what moves it toward stable.Too late buddy. This library is now more than one year behind. You need to understand that most people have already decided to move away from it. There are in fact new libraries released to replace this one, and instructions on how to use the firebase sdk directly. Many of us were hoping to get this message one year ago and see then that someone cares about this.
Reacted by djamnReacted by David HaleyAngularFire is not dead. I am working on it. I have AngularFire v21 ready, essentially. Just download the latest canary builds. It's solid.
I get your frustration. I'd be frustrated, too.
Reacted by AlvaroReacted by David HaleyRelated: #3699 (comment)
AngularFire
21.0.0-rc.1has been released. View the release notes for details on what's changed.I've updated the AngularFire 21 Upgrade Guide to show the commands to upgrade to the release candidate. It also explains a few changes that may impact you when you upgrade. If you have any trouble upgrading, please let me know.
Create an issue for any bugs found in this release candidate.
Reacted by David Haley and AlvaroAngularFire
21.0.0-rc.2has been released. View the release notes for details on what's changed, including one breaking change for apps that use App Check with server rendering.If you're on
21.0.0-rc.1, update withng update @angular/fire@21.0.0-rc.2. The AngularFire 21 Upgrade Guide covers upgrading from AngularFire 20.Reacted by David Haley
Angular v21 was release the other day but we're currently unable to use the @angular/fire package with it. When can we expect support to be added