Angular调用Firebase Auth自定义服务时出现Class extends value undefined错误

核心问题分析 #

这个错误源于undici库（Firebase依赖的HTTP客户端）的构造函数未正确加载，大概率是Angular Fire与Angular版本不兼容，或者Firebase初始化流程有误，也可能是SSR环境下的认证逻辑冲突。

具体修复步骤 #

1. 确保Angular Fire与Angular版本匹配 #

Angular 18必须搭配@angular/fire 18.x版本。执行以下命令更新依赖：

npm install @angular/fire@latest firebase@latest

2. 完善Firebase初始化配置 #

在Angular 18的独立配置文件（app.config.ts）中，正确提供Firebase应用和Auth服务：

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

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAuth(() => getAuth())
  ]
};

3. 修复AuthService的认证状态判断 #

currentUser是同步属性，页面初始化时可能尚未完成Firebase Auth的初始化，导致结果不可靠。改用authState observable监听认证状态：

import { Injectable } from '@angular/core';
import { Auth, authState } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  isUserSignedIn$: Observable<boolean>;

  constructor(private auth: Auth) {
    this.isUserSignedIn$ = authState(this.auth).pipe(
      map(user => !!user)
    );
  }
}

4. 更新Navbar组件逻辑 #

在组件中订阅observable获取实时状态，同时实现生命周期钩子清理订阅：

import { NgClass } from '@angular/common';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { AuthService } from '../../service/auth/auth.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, NgClass],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.css'
})
export class NavbarComponent implements OnInit, OnDestroy {
  isUserSignIn: boolean = false;
  private authSubscription?: Subscription;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.authSubscription = this.authService.isUserSignedIn$.subscribe(isSignedIn => {
      this.isUserSignIn = isSignedIn;
    });
  }

  ngOnDestroy(): void {
    this.authSubscription?.unsubscribe();
  }
}

5. 处理SSR环境（如果启用了Angular Universal） #

如果应用使用SSR，Firebase Auth无法在服务器端运行，需在服务中判断运行环境：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Auth, authState } from '@angular/fire/auth';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  isUserSignedIn$: Observable<boolean>;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private auth: Auth
  ) {
    if (isPlatformBrowser(this.platformId)) {
      this.isUserSignedIn$ = authState(this.auth).pipe(map(user => !!user));
    } else {
      // 服务器端默认返回未登录状态
      this.isUserSignedIn$ = of(false);
    }
  }
}

内容的提问来源于stack exchange，提问作者Vinayak Sutar