Angular Fire Imports angular 13-CodePudding

I try to import the AngularFireModule and the AngularFirestoreModule but it says

Module '"@angular/fire/firestore"' has no exported member 'AngularFirestoreModule'.
Module '"@angular/fire"' has no exported member 'AngularFireModule'.

Here is what I've got in my app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TaskComponent } from './components/task/task.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFirestoreModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ], 
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

These are my versions:

Angular CLI: 13.3.7
"@angular/fire": "^7.2.0",
"firebase": "^9.8.2",

Heres the table for the version compatibility compatibility

CodePudding user response：

Depending on how you are using the AngularFire app, the locations of things have changed. With the newer version, the AngularFire libraries can be tree-shaken. However, to use the old methods, there is a compatibility layer.

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

becomes:

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

AngularFire