Adding firebase in Angular 13 project not working

I’m still trying to use firebase in an Angular project. Here is the error "Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using
provideFirebaseApp) or you’re calling an AngularFire method outside of an NgModule (which is not supported)"

Before starting, here is my Angular-cli version:

ng --version

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|       ____|_____|___|
                |___/


Angular CLI: 13.0.4
Node: 14.19.0
Package Manager: npm 6.14.16
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.4
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.0.4
@angular-devkit/schematics      13.0.4
@angular/cli                    13.0.4

Theses are the steps, I’m following :

• Run ng new angular-fire && cd angular-fire
• I’ve created a project in Firebase (https://console.firebase.google.com) and activated authentication with Google
• Run ng add @angular/fire (Please, select only the option Authentication. We don’t need the others for the moment)
• the previous command has updated your app.module.ts, and environment files

my app.module.ts now looks like :

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

import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, delete everything in app.component.html and add just a button :

<div>
  <button (click)="signIn()">Sign in with Google</button>
</div>

and in app.component.ts, add signIn function :

import { Component } from '@angular/core';
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
} from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  title = 'angular-fire';

  signIn() {
    return signInWithPopup(getAuth(), new GoogleAuthProvider())
      .then((result) => {
        const user = result.user;
        console.log(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;

        console.log('errorCode', errorCode);
        console.log('errorMessage', errorMessage);
      });
  }
}

Finally,

• run ng serve -o
• open the console of your browser
• click on the button Sign in with Google
• you’ll see this error Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you’re calling an AngularFire method outside of an NgModule (which is not supported).

Thanks in advance for your help !