Angular集成Firebase时default属性报错，求解决方案

问题描述 #

我在Angular项目中编写的AuthService代码如下：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from 'src/app/model/user/User';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/app'; // Notice the change here

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: AngularFireAuth) { }

  login(email: string, password: string): Observable<User> {
    return new Observable<User>(observer => {
      this.auth.setPersistence(firebase.default.auth.Auth.Persistence.LOCAL).then(() => {
        this.auth.signInWithEmailAndPassword(email, password).then((firebaseUser:
        firebase.default.auth.UserCredential) => {
          observer.next({ email, id: firebaseUser.user.uid });
          observer.complete();
        }).catch(error => {
          observer.error(error);
          observer.complete();
        });
      });
    });
  }
}

使用第一个default时出现错误：

Property 'default' does not exist on type 'typeof import("(folder directory)/node_modules/firebase/app/dist/app/index")'.ts(2339)

使用第二个default时出现错误：

Namespace "(folder directory) /node_modules/firebase/app/dist/app/index" has no exported member 'default'.ts(2694)

尝试多种导入方式仍无法解决，求帮助。

解决方案 #

1. 修正Firebase导入方式 #

Firebase v9+采用模块化导入，而@angular/fire/compat是兼容层，不需要直接导入firebase/app的默认导出。直接通过AngularFireAuth实例访问相关功能即可：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from 'src/app/model/user/User';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: AngularFireAuth) { }

  login(email: string, password: string): Observable<User> {
    return new Observable<User>(observer => {
      // 直接传入字符串类型的持久化参数，无需firebase.default
      this.auth.setPersistence('local').then(() => {
        this.auth.signInWithEmailAndPassword(email, password).then((firebaseUser) => {
          observer.next({ email, id: firebaseUser.user.uid });
          observer.complete();
        }).catch(error => {
          observer.error(error);
          observer.complete();
        });
      });
    });
  }
}

2. 显式类型定义修正 #

如果需要指定UserCredential类型，直接从@angular/fire/compat/auth导入：

import { AngularFireAuth, UserCredential } from '@angular/fire/compat/auth';

之后在代码中使用：

this.auth.signInWithEmailAndPassword(email, password).then((firebaseUser: UserCredential) => {
  // 逻辑代码
})

3. 版本兼容性检查 #

确保@angular/fire与firebase版本匹配：

• AngularFire v7+对应Firebase v9+
• 兼容层compat模式下无需直接操作firebase默认导出对象，避免版本不匹配导致的类型冲突

关键说明 #

• @angular/fire/compat/auth已封装Firebase Auth的兼容逻辑，无需手动访问firebase.default
• 持久化类型支持传入字符串'local'、'session'或'none'，对应Firebase的Persistence枚举值
• 优先从@angular/fire/compat包导入类型，避免直接引用firebase包的类型引发冲突

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