Angular 和 Firebase Storage 返回：TypeError：app.storage 不是函数

Question

我正在尝试将我的 Angular 应用程序与 FireBase 连接，但组件显示为空白，并且 Chrome 控制台显示“类型错误：app.storage 不是函数” 我做错了什么？ 预先感谢。´

ng--版本

Angular CLI: 13.3.11
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.11
@angular-devkit/build-angular   13.3.11
@angular-devkit/core            13.3.11
@angular-devkit/schematics      13.3.11
@angular/cdk                    13.3.9
@angular/cli                    13.3.11
@angular/fire                   7.6.1
@angular/material               13.3.9
@schematics/angular             13.3.11
rxjs                            7.5.7
typescript                      4.6.4

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database'

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Page404Component } from './page404/page404.component';
import { environment } from 'src/environments/environment';
import { UploadComponent } from './upload/upload.component';


@NgModule({
  declarations: [
    AppComponent,
    Page404Component,
    UploadComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFirestoreModule,
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { Page404Component } from './page404/page404.component';
import { AuthGuard } from '@auth/guards/auth.guard';
import { UploadComponent } from './upload/upload.component';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./website/website.module').then(m => m.WebsiteModule)
  },
  {
    path: 'upload',
    component: UploadComponent
  },
  {
    path: 'cms',
    canActivate: [ AuthGuard ],
    loadChildren: () => import('./cms/cms.module').then(m => m.CmsModule)
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: '**',
    component: Page404Component
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

...以及测试组件...

上传.component.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireStorage } from '@angular/fire/compat/storage';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {

  constructor(
    private upload: AngularFireStorage
  ) { }

  ngOnInit(): void {
  }

}

上传.component.html

<p>upload works!</p>

chrome 控制台完全错误

Error: Uncaught (in promise): TypeError: app.storage is not a function
TypeError: app.storage is not a function
    at angular-fire-compat-storage.js:107:62
    at _ZoneDelegate.invoke (zone.js:372:1)
    at Zone.run (zone.js:134:1)
    at NgZone.runOutsideAngular (core.mjs:25593:1)
    at angular-fire-compat-storage.js:107:34
    at ɵcacheInstance (angular-fire-compat.js:147:29)
    at new AngularFireStorage (angular-fire-compat-storage.js:106:38)
    at Object.AngularFireStorage_Factory [as factory] (angular-fire-compat-storage.js:133:1)
    at R3Injector.hydrate (core.mjs:11579:1)
    at R3Injector.get (core.mjs:11398:1)
    at resolvePromise (zone.js:1211:1)
    at resolvePromise (zone.js:1165:1)
    at zone.js:1278:1
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25681:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:585:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
    at invokeTask (zone.js:1661:1)

Answer 1

同样的问题，我得到同样的错误