Having trouble connecting my Angular app to FireBase. The component appears blank and the Chrome console is showing a 'TypeError: app.storage is not a function'. Any ideas on what I might be doing wrong? Thanks in advance.
ng --version
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 { }
app-routing.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 = [
//routes go here
];
@NgModule({
imports: [RouterModule.forRoot(routes,{
preloadingStrategy: PreloadAllModules})],
exports: [RouterModule]
})
export class AppRoutingModule { }
...and the test component...
upload.component.ts
//Upload Component TypeScript Code here
upload.component.html
<p>upload works!</p>
full error on chrome console
Error: Uncaught (in promise): TypeError: app.storage is not a function
TypeError: app.storage is not a function
//Error details...