Angular v21 support

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

Also interested in the timeline, but i realize it takes time :)

Yeah, I'm currently using Angular v21 with @angular/fire with --legacy-peer-deps for now.

Any news on this? This should have been taken care from day 1 since it is the same company

21.0.0-rc.0 was 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.

@jamesdaniels

@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?

There 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.

PR got merged. #3674

we can expect in few weeks

Do we have any news on this?

Just 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?

Righteo, the RC was cut in Nov soooooo, just gonna come right out and ask it..... is Angular Fire dead?

@jamesdaniels

@jamesdaniels any update on the release date ?

Can anyone message someone from the Angular team and tell them about this?

@jamesdaniels

Any more info @jamesdaniels ?

Following 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.

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?

news?

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! 🚀

well 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.

Thanks 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's next tag (npm latest is still 20.0.1). You can install it with:

npm i @angular/fire@next

Two 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.0 still carries an unused @angular/platform-browser-dynamic peer (issue #3667), so on Angular 21 you may still need --legacy-peer-deps for 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 add schematic fixes), and I would rather get concrete bug reports against @angular/fire@next than 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.

Thanks 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's next tag (npm latest is still 20.0.1). You can install it with:
npm i @angular/fire@next
Two 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.0 still carries an unused @angular/platform-browser-dynamic peer (issue #3667), so on Angular 21 you may still need --legacy-peer-deps for 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 add schematic fixes), and I would rather get concrete bug reports against @angular/fire@next than 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.

AngularFire 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.

Related: #3699 (comment)

AngularFire 21.0.0-rc.1 has 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.

AngularFire 21.0.0-rc.2 has 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 with ng update @angular/fire@21.0.0-rc.2. The AngularFire 21 Upgrade Guide covers upgrading from AngularFire 20.

Navigation Menu

Repository navigation

Angular v21 support #3678

20 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular v21 support #3678

Description

Activity

woutersteven commented on Nov 23, 2025

matheuscabralsz commented on Nov 24, 2025

sorcamarian commented on Nov 25, 2025

jamesdaniels commented on Nov 26, 2025

bor1e commented on Dec 2, 2025

sorcamarian commented on Dec 4, 2025

coturiv commented on Dec 5, 2025

JeevanMahesha commented on Dec 8, 2025

sorcamarian commented on Jan 3, 2026

sergiotome commented on Jan 15, 2026

niallmomo commented on Jan 19, 2026

JeevanMahesha commented on Jan 19, 2026

sorcamarian commented on Jan 25, 2026

tgangso commented on Jan 29, 2026

woutersteven commented on Jan 31, 2026

20 remaining items

sergiotome commented on Apr 28, 2026

quedicesebas commented on Jul 9, 2026

quedicesebas commented on Jul 16, 2026

rubenheymans commented on Jul 17, 2026

quedicesebas commented on Jul 17, 2026

armando-navarro commented on Jul 26, 2026

sergiotome commented on Jul 26, 2026

armando-navarro commented on Sep 17, 2026

armando-navarro commented on Sep 17, 2026

armando-navarro commented on Sep 24, 2026

armando-navarro commented on Oct 10, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions