angularjs – Navigate by URL not working and not redirecting

I have made a simple angular project using firebase in that project I used angularfire to dealwith sign in and sign out.

I have written an auth service.
The code for auth service is

import { Injectable } from '@angular/core';
import {AngularFireAuth} from "@angular/fire/auth";

@Injectable({
    providedIn: 'root'
})

export class AuthService {

 constructor(private auth: AngularFireAuth) { }

 signUp(email:string , password:string)
 {
   return this.auth.createUserWithEmailAndPassword(email,password);
 }

 signIn(email:string , password:string){
  return this.auth.signInWithEmailAndPassword(email,password);
 }

 getUser()
 {
    return this.auth.authState;
 }   

 signOut(){
   return this.auth.signOut();
 }


}

I am dealing with the signout from my header so my header.component.ts file is here

import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';
import { ToastrService } from "ngx-toastr";
import { Router } from "@angular/router"


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ('./header.component.css')
})
export class HeaderComponent implements OnInit {

   email:string = null;

  constructor(
    private auth:AuthService,
    private router:Router,
     private toastr:ToastrService
  ) { 

    auth.getUser().subscribe(
      (user) =>{
        console.log(user) //just for checking user 
         if(user) 
        this.email = user.email
        else
        this.email = null;  
        console.log(this.email)
      })

  }

  ngOnInit(): void {
  }
   
   handleSignOut(){  //hitesh ka code alag h 
         this.auth.signOut();

         this.router.navigateByUrl("/signin")
         this.toastr.success("Logout Sucessfully")
         this.email = null;
   }   
}

logout method is working but it is not redirecting me to sign in

if I use then/catch or async/await everything works fine but I am not getting why ?