Angular项目Firebase初始化失败，Google Auth调用报错

问题背景 #

尝试在Angular项目中集成Firebase的Google认证功能，但运行时始终提示Firebase App未初始化，尽管已在app.module.ts中配置初始化代码，且environment.firebase配置信息无误。

代码实现 #

Google认证方法 #

import firebase from 'firebase/compat/app';
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  UserCredential,
} from 'firebase/auth';
    
googleSignIn(): Promise<UserCredential> {
    const provider = new GoogleAuthProvider();
    const auth = getAuth();
    return signInWithPopup(auth, provider);
}

AppModule配置 #

@NgModule({
  declarations: [AppComponent],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    EffectsModule.forRoot([UserEffects]),
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})

错误信息 #

core.mjs:8400 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
    at getApp (index.esm2017.js:479:29)
    at getAuth (index-9a76d29a.js:10414:30)
    at RestClientService.googleSignIn (rest-client.service.ts:20:25)
    at user.effects.ts:31:37
    at source.subscribe.isComplete (switchMap.js:14:23)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at filter.js:6:128
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)

项目依赖版本 #

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@ngrx/effects": "^15.4.0",
    "@ngrx/entity": "^15.4.0",
    "@ngrx/store": "^15.4.0",
    "@ngrx/store-devtools": "^15.4.0",
    "firebase": "^10.4.0",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primeng": "^15.4.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },

补充说明 #

已多次重装并重新添加@angular/fire，问题仍未解决。

解决方案 #

1. 补充Firebase Auth模块配置 #

在AppModule的imports中添加Auth服务的提供者，确保Auth与初始化的Firebase App绑定：

// app.module.ts
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()), // 新增此行
    EffectsModule.forRoot([UserEffects]),
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})

2. 通过依赖注入获取Auth实例 #

修改认证服务，通过Angular的依赖注入获取Auth实例，避免在App初始化完成前直接调用getAuth()：

// rest-client.service.ts
import { Injectable } from '@angular/core';
import { Auth, signInWithPopup, GoogleAuthProvider, UserCredential } from '@angular/fire/auth';

@Injectable({ providedIn: 'root' })
export class RestClientService {
  constructor(private auth: Auth) {} // 注入Auth服务

  googleSignIn(): Promise<UserCredential> {
    const provider = new GoogleAuthProvider();
    return signInWithPopup(this.auth, provider); // 使用注入的实例
  }
}

3. 修复版本兼容性问题 #

@angular/fire@7.6.1与firebase@10.4.0存在版本不兼容，将Firebase降级到兼容版本：

npm install firebase@^9.23.0

4. 验证环境配置完整性 #

确认environment.ts中的Firebase配置包含所有必填字段：

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

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