Angular 19 Fire cls is not a constructor

I have an Angular Firebase app with

"@angular/cdk": "19.0.4",
"@angular/common": "19.0.5",
"@angular/compiler": "19.0.5",
"@angular/core": "19.0.5",
"@angular/fire": "19.0.0",


And I also have main.ts file, that contains

import { ApplicationConfig, enableProdMode, importProvidersFrom } from '@angular/core';

import { environment } from './environments/environment';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app/app-routing.module';
import { AppComponent } from './app/app.component';
import { provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
import { authInterceptor } from './app/interceptors/auth.interceptor';

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';


if (environment.production) {
enableProdMode();
}

export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(BrowserModule, AppRoutingModule),
provideAnimations(),
provideHttpClient(withInterceptorsFromDi(), withInterceptors([authInterceptor])),
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideAuth(() => getAuth())
]
};

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));


Inside my app.component.ts I subscribe to user changes

private subscribeUserEvents() {
this.authService.user$.subscribe(async (user) => {
if (user) {
this.authService.currentUserSig.set({
id: user.uid,
username: user.displayName,
email: user.email,
token: await user.getIdToken()
});
} else {
this.authService.currentUserSig.set(null);
}
});
}


I also have auth.service.ts that does this

import { Injectable, signal } from '@angular/core';
import {
Auth,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
signOut,
setPersistence,
browserLocalPersistence,
user
} from '@angular/fire/auth';
import { Router } from '@angular/router';

export interface User {
id: string;
username: string;
email: string;
token: string;
}

@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private auth: Auth, private router: Router) {
setPersistence(this.auth, browserLocalPersistence).then(() => console.log('Persistence set to browser local'));
}

user$ = user(this.auth);
currentUserSig = signal<User | null | undefined>(undefined);

register(email: string, password: string) {
return createUserWithEmailAndPassword(this.auth, email, password);
}

async login(email: string, password: string) {
return signInWithEmailAndPassword(this.auth, email, password);
}

async logout() {
await signOut(this.auth);
await this.router.navigate(['/sign-in']);
}
}


And auth.guard.ts with

import { Injectable, inject } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
private authService = inject(AuthService);
private router = inject(Router);

canActivate(): Observable<boolean | UrlTree> {
return this.authService.user$.pipe(
take(1),
map(user => {
if (user) {
return true;
} else {
return this.router.createUrlTree(['/sign-in']);
}
})
);
}
}


And finally, auth.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
const authService = inject(AuthService);
const token = authService.currentUserSig()?.token;
if (token) {
req = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next(req);
};


It all seems to be working just fine, token is passed to backend calls, rotues are guarded, etc... but I see this error when I first open the app. I assume it is related to Firebase providers in main.ts, but I have no idea why is that happening

ERROR TypeError: cls is not a constructor at _getInstance (index-dfc2d82f.js:1954:16) at index-dfc2d82f.js:2839:59 at Generator.next () at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:17:1) at asyncToGenerator.js:22:1 at new ZoneAwarePromise (zone.js:2702:25) at asyncToGenerator.js:14:1 at _ZoneDelegate.invoke (zone.js:369:28) at ZoneImpl.run (zone.js:111:43)
​

Continue reading...