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/appponent';
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 appponent.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)