由于某种原因，我无法使用@angular/fire 的存储（ANGULAR 16）

Question

我对 Angular/Fire 有点陌生，我试图创建一个基本的应用程序来尝试它的一些功能。 Firestore 和 auth 似乎工作正常，但是当我尝试注入存储时，Angular 给我抛出了这个错误：

错误 FirebaseError：Firebase：未创建 Firebase 应用程序“[DEFAULT]” - 首先调用initializeApp（）（应用程序/无应用程序）。

说实话，我没有发现任何有用的东西。

这是我的 app.module.ts 和我的 app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FindMATCHComponent } from './find-match/find-match.component';
import { environment } from 'src/environments/environment.development';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { getStorage, provideStorage } from '@angular/fire/storage';


@NgModule({
  declarations: [
    AppComponent,
    FindMATCHComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() =>  initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
  ],
  providers: [
    ScreenTrackingService,UserTrackingService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { getDownloadURL, ref, Storage } from '@angular/fire/storage';
...
export class AppComponent {
  title = 'classicgwentonline-bcde8';
  firestore: Firestore = inject(Firestore)
  items$: Observable<any[]>;
  private storage: Storage = inject(Storage);
  constructor() {
    const aCollection = collection(this.firestore, 'items')
    this.items$ = collectionData(aCollection);

  }

}

我只是期望存储API能够像firestore和auth一样工作，但是一旦我注入云存储，Angular就说我没有调用initializeApp()。

Answer 1

我设法通过更改 app.module.ts 中的导入来解决这个问题，如下所示：

imports: [
        BrowserModule,
        provideFirebaseApp(() => initializeApp(environment.firebaseConfig)), 
        provideFirestore(() => getFirestore()),
        StorageModule,
        ....// other imports
    ],

进口自：

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { StorageModule } from '@angular/fire/storage';

目前看来正在工作。我希望能有所帮助。花了一整天的时间试图让它工作......毕竟存储模块是关键！ :)

Answer 2

Angular-fire v16 刚刚达到 RC！

您可以使用

npm install @angular/[email protected]

安装它

Answer 3

我使用 Angular 16 的“firebase”：“^9.6.0”和“@angular/fire”：“^7.2.0”修复了这个问题。

希望对您有帮助！