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

I know there are other people that have asked this question, but I can't seem to find the answer. I have installed the fire module using Node.js, using : npm install @angular/fire. When I try to import it to my angular app i get this error : Module '"@angular/fire"' has no exported member 'AngularFireModule'. The error also arises for the AngularFireDatabaseModule. I restarted and created a new app but the problem still arises. I am also using Angular 12.

Here is my app.module.ts code :

import { BrowserModule } from '@angular/platform-browser';
import { AddTaskComponent } from './add-task/add-task.component';

import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { EditTaskComponent } from './edit-task/edit-task.component';
import { TasksComponent } from './tasks/tasks.component';
import { ViewTaskComponent } from './view-task/view-task.component';
import { FormsModule } from '@angular/forms';

// Firebase

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    ViewTaskComponent,
    TasksComponent,
    EditTaskComponent,
    AddTaskComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularDatabaseModule,
    RouterModule.forRoot([
      {
        path:'',
        component: TasksComponent
      },
      {
        path:'viewTask',
        component: ViewTaskComponent
      },
      {
        path:'editTask',
        component: EditTaskComponent
      },
      {
        path:'addTask',
        component: AddTaskComponent
      },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }