Angular 17独立项目集成Firebase认证与存储时遇错误求助

问题核心 #

这个错误的本质是AngularFire服务未在正确的依赖注入上下文里初始化或调用——即便你已经在app.config.ts配置了提供者，也可能存在顺序错误、注入方式不当或认证逻辑的问题。

分步解决方案 #

1. 修正app.config.ts的提供者顺序与配置 #

AngularFire的基础App初始化必须优先于其他服务，确保provideFirebaseApp是第一个配置的提供者，后续的provideAuth和provideStorage要基于初始化后的Firebase实例。

正确配置示例：

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // 优先初始化Firebase App
    provideFirebaseApp(() => initializeApp({
      apiKey: 'YOUR_API_KEY',
      authDomain: 'YOUR_AUTH_DOMAIN',
      projectId: 'YOUR_PROJECT_ID',
      storageBucket: 'YOUR_STORAGE_BUCKET',
      messagingSenderId: 'YOUR_SENDER_ID',
      appId: 'YOUR_APP_ID'
    })),
    // 配置Auth服务
    provideAuth(() => getAuth()),
    // 配置Storage服务
    provideStorage(() => getStorage())
  ]
};

2. 确保StorageService的注入与逻辑正确 #

服务需正确注入AngularFireAuth和AngularFireStorage，且认证逻辑要在Angular依赖注入上下文内执行，避免直接调用原生Firebase方法绕过AngularFire封装。

示例服务代码：

import { Injectable, inject } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireStorage } from '@angular/fire/compat/storage';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private afAuth = inject(AngularFireAuth);
  private afStorage = inject(AngularFireStorage);

  // 自定义令牌登录
  signInWithCustomToken(token: string): Observable<void> {
    return from(this.afAuth.signInWithCustomToken(token));
  }

  // 获取文件下载链接
  getDownloadURL(path: string): Observable<string> {
    const ref = this.afStorage.ref(path);
    return ref.getDownloadURL();
  }
}

3. 组件中正确调用服务 #

注入StorageService后，确保先完成认证再调用getDownloadURL，避免在Auth未初始化时操作Storage：

示例组件代码：

import { Component, inject, OnInit } from '@angular/core';
import { StorageService } from './storage.service';

@Component({
  selector: 'app-file-viewer',
  standalone: true,
  template: '<div *ngIf="url">{{ url }}</div>'
})
export class FileViewerComponent implements OnInit {
  private storageService = inject(StorageService);
  url?: string;

  ngOnInit(): void {
    const token = localStorage.getItem('custom-jwt-token');
    if (token) {
      this.storageService.signInWithCustomToken(token).subscribe({
        next: () => {
          this.storageService.getDownloadURL('path/to/your/file').subscribe(url => {
            this.url = url;
          });
        },
        error: err => console.error('认证失败:', err)
      });
    }
  }
}

4. 额外排查点 #

• 确保@angular/fire版本与Angular 17兼容，建议用最新稳定版。
• 不要在服务构造函数中直接调用Firebase异步方法，移到组件生命周期钩子（如ngOnInit）或用户触发事件中执行。
• 检查是否直接使用了firebase/auth或firebase/storage的原生API，这类调用会绕过AngularFire上下文管理，触发报错。

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