无法使用角火储存。 FirebaseError：Firebase：未创建 Firebase 应用程序“[DEFAULT]” - 首先调用initializeApp（）（应用程序/无应用程序）

Question

我现在已经被困了好几天了。我需要进口角火存储。我认为我在初始化角度服务之前使用了它们。

app.module.ts

import { NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { firebaseConfig } from './../environments/firebase-config';

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './components/nav/nav.component';
import { HomeComponent } from './pages/home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from './pages/auth/register/register.component';
import { LoginComponent } from './pages/auth/login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { ProfileComponent } from './pages/profile/profile.component';
import { HeaderComponent } from './components/header/header.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { MyordersComponent } from './pages/profile/myorders/myorders/myorders.component';
import { MyprofileComponent } from './pages/profile/myprofile/myprofile/myprofile.component';
import { MyfavouriteComponent } from './pages/profile/myfavourite/myfavourite/myfavourite.component';
import { AddressComponent } from './pages/profile/address/address/address.component';
import { PaymentComponent } from './pages/profile/payment/payment/payment.component';
import { DatabaseComponent } from './pages/dashboard/database/database/database.component';
import { OverviewComponent } from './pages/dashboard/overview/overview/overview.component';
import { DiscogsComponent } from './pages/dashboard/discogs/discogs/discogs.component';
import { AddItemModalComponent } from './components/add-item-modal/add-item-modal.component'
import { FireDBService } from './services/fire-db.service';
import { AuthService } from './pages/auth/auth.service';



@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    HomeComponent,
    RegisterComponent,
    LoginComponent,
    ProfileComponent,
    HeaderComponent,
    DashboardComponent,
    MyordersComponent,
    MyprofileComponent,
    MyfavouriteComponent,
    AddressComponent,
    PaymentComponent,
    DatabaseComponent,
    OverviewComponent,
    DiscogsComponent,
    AddItemModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule,

    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideStorage(() => getStorage()),

  ],
  providers: [FireDBService, AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "laika-records",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "npm run config && ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "config": "ts-node ./src/environments/writeEnv.ts"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@preline/overlay": "^1.4.0",
    "dotenv": "^16.3.1",
    "firebase": "^10.3.1",
    "flowbite": "^1.8.1",
    "preline": "^1.9.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.5",
    "@angular/cli": "~16.1.5",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "autoprefixer": "^10.4.15",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.27",
    "tailwindcss": "^3.3.3",
    "typescript": "~5.1.3"
  }
}

注入服务

private storage: Storage = inject(Storage); 

我尝试在 NgModule 之前初始化 firebase，但只有在我通过导入 firebase/compat/app 进行初始化时才有效，如果我理解正确的话，这是旧方法。

import firebase from 'firebase/compat/app';



firebase.initializeApp(firebaseConfig);
@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    HomeComponent,
    RegisterComponent,
    LoginComponent,
    ProfileComponent,
    HeaderComponent,
    DashboardComponent,
    MyordersComponent,
    MyprofileComponent,
    MyfavouriteComponent,
    AddressComponent,
    PaymentComponent,
    DatabaseComponent,
    OverviewComponent,
    DiscogsComponent,
    AddItemModalComponent
  ],

有人可以帮忙吗？

Answer 1

我发现这张票有完全相同的问题描述，无法找到答案。因此，我尝试检查哪些相关包被定义为

@angular/[email protected]

的依赖项。它们是

firebase@^9.8.2

和

[email protected]

。因此，您需要拥有这些版本或更新版本，直到发布

@angular/[email protected]

时可用的版本（

firebase@^9.22.1

和

[email protected]

）。

因为

[email protected]

已经很旧了，所以我保留了它并将 firebase 降级到 9.8.2，然后我的问题就消失了。还没有尝试升级软件包，但我确信我可以稍微提高版本...