@angular/cli(13 or 14) @angular/fire(7.4) Auth aren't working anymore?

On Ubuntu 20.04 ( wsl2/Windows 10 Edition Windows 10 Pro Version 21H1 Installed on ‎11/‎3/‎2021 OS build 19043.1706 Experience Windows Feature Experience Pack 120.2212.4170.0

and docker and VMware) all give same result.

This is my simple angular(tried both v13-lts and 14) with firebase-tools (11.0.1 and 9.23.3) and @angular/fire (7.4) app.module.ts

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 { FireAuthComponent } from './fire-auth/fire-auth.component';
import { getAuth, provideAuth} from '@angular/fire/auth';


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

this is the environment.ts (values are mingled with, they not real)

export const environment = {
  firebase: {
    projectId: 'xxxxxxxxx',
    appId: '1:xxxxxxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxxx',
    databaseURL: 'https://xxxxxxxxxxxxx-default-rtdb.firebaseio.com',
    storageBucket: 'xxxxxxxxxxx.appspot.com',
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxxxxxxxx.firebaseapp.com',
    messagingSenderId: 'xxxxxxxxxxxxxxx',
    measurementId: 'xxxxxxxxxxxxxxxxx',
  },
  production: false
};

This is the fire-auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';
@Component({
  selector: 'app-fire-auth',
  // templateUrl: 'fire-auth.component.html',
  template: `
  <div *ngIf="auth.user | async as user; else showLogin">
    <h1>Hello {{ user.displayName }}!</h1>
    <button (click)="logout()">Logout</button>
  </div>
  <ng-template #showLogin>
    <p>Please login.</p>
    <button (click)="login()">Login with Google</button>
  </ng-template>
`,
})
export class FireAuthComponent implements OnInit {

  constructor(public auth: AngularFireAuth) { }

  ngOnInit(): void {
  }
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

Following the instructions at @angular/fire and @angular/fire auth

AND got the error at http://localhost:4200

core.mjs:6412 ERROR NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.mjs:9091:27)
    at R3Injector.get (core.mjs:9258:33)
    at R3Injector.get (core.mjs:9258:33)
    at R3Injector.get (core.mjs:9258:33)
    at injectInjectorOnly (core.mjs:4870:33)
    at Module.ɵɵinject (core.mjs:4874:12)
    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:126:1)
    at R3Injector.hydrate (core.mjs:9353:35)
    at R3Injector.get (core.mjs:9247:33)
    at NgModuleRef.get (core.mjs:22413:33)
handleError @ core.mjs:6412
(anonymous) @ core.mjs:27319
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.mjs:26413
(anonymous) @ core.mjs:27319
invoke @ zone.js:372
onInvoke @ core.mjs:26514
invoke @ zone.js:371
run @ zone.js:134
(anonymous) @ zone.js:1275
invokeTask @ zone.js:406
onInvokeTask @ core.mjs:26501
invokeTask @ zone.js:405
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
then @ zone.js:1450
bootstrapModule @ core.mjs:27231
4431 @ main.ts:11
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ main.ts:12
(anonymous) @ main.ts:12
__webpack_require__.O @ chunk loaded:23
(anonymous) @ main.ts:12
webpackJsonpCallback @ jsonp chunk loading:71
(anonymous) @ main.js:2
main.ts:12 NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.mjs:9091:27)
    at R3Injector.get (core.mjs:9258:33)
    at R3Injector.get (core.mjs:9258:33)
    at R3Injector.get (core.mjs:9258:33)
    at injectInjectorOnly (core.mjs:4870:33)
    at Module.ɵɵinject (core.mjs:4874:12)
    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:126:1)
    at R3Injector.hydrate (core.mjs:9353:35)
    at R3Injector.get (core.mjs:9247:33)
    at NgModuleRef.get (core.mjs:22413:33)

What is wrong?