Firebase AngularFireAuth not letting me update user email even though user if Authenticated

Question

I am not sure why my Angular Application won't let me change the email of a logged in authenticated user in firebase.

I have no problem getting the email as an observable like this:

    getUserEmail():Observable<string | null>{
        return this.afAuth.authState.pipe(map(user => user? user.email : null));
    }

But when I try to update the users email, it just returns as an observable:

    updateUserEmail(newEmail: string){
        return this.afAuth.authState.pipe(map(user => user? user.updateEmail(newEmail) : null));
    }

Here is the relevant parts of the service below:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { from, Observable, Subject } from 'rxjs'; 
import { map } from "rxjs/operators";
import { UIService } from '../shared/ui.service';

import { AuthData } from "./auth-data.model";
import { UserData } from './user-data.model';
import { User } from "./user.model";
import { UserService } from './user.service';

@Injectable()
export class AuthService {
    public authChange = new Subject<boolean>();
    private isAuthenticated: boolean = false;
    public userLoggedIn: User | null = null;
    public userUID$: Observable<string>;
    // public userLoggedIn: Observable<User | null>;

    public auth: any;

    constructor(private router: Router,
                private afAuth: AngularFireAuth,
                private uiService: UIService,
                private user: UserService) 
                {
                    this.userUID$ = afAuth.authState.pipe(map(user => user? user.uid : null));
                    
                }

    getUserEmail():Observable<string | null>{
        return this.afAuth.authState.pipe(map(user => user? user.email : null));
    }

    updateUserEmail(newEmail: string, password:string, oldEmail:string){
        return this.afAuth.authState.pipe(map(user => user? user.updateEmail(newEmail) : null));
    }

}

Answer 1

I was able to figure this out, I just need to both add the actual AngularFireAuthModule and I hade to sign in again with the users credentials before changing the email:

How I updated myservice below:

    updateUserEmail(newEmail: string, password:string, oldEmail:string){
        return from(this.afAuth.signInWithEmailAndPassword(oldEmail, password).then(userCredentials => {
                    return userCredentials.user.updateEmail(newEmail);
        }))
    }

How I updated my firbase module below:

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
    
  ],
  exports: [
    AngularFireModule,
    AngularFireAuthModule,
    AngularFirestoreModule
  ]
})
export class  AppFirebaseModule { }