Having Routing issue in angular

Question

I have two modules - 1)AppRoutingModule 2)AdminRoutingModule

I have given route of signup/login component and lazily loaded AdminModule On AdminModule I have used AuthGuard

Now when navigate to login page , an alert is displayed stating that- you must login first for accessing this page. So for that I have checked whether the state.url includes(''). which is path for my login page. Still I am getting that alert on login page

This is my AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignupComponent } from './MyComponents/signup/signup.component';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: SignupComponent
  },
  {
    path: 'main',
    canActivate: [AuthGuard],
    loadChildren: () => import('./modules/admin/admin.module').then((m)=> m.AdminModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is my AdminRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './components/main/main.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HomeComponent } from './components/home/home.component';
import { UserListingComponent } from './components/user-listing/user-listing.component';

const routes: Routes = [
  {
    path: '', component: MainComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'home', component: HomeComponent },
      { path: 'userListing', component: UserListingComponent },
      { path: '', redirectTo: '/main/home', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

This is my AuthGuard

import { Injectable } from '@angular/core';

import {

  ActivatedRouteSnapshot,

  RouterStateSnapshot,

  Router,

  UrlTree,

} from '@angular/router';

import { UserService } from '../services/user.service';

import { Observable } from 'rxjs';


@Injectable({

  providedIn: 'root',

})

export class AuthGuard {

  constructor(public userService: UserService, public router: Router) {}

  canActivate(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot

  ): Observable<boolean> | Promise<boolean> | UrlTree | boolean {

    const Loginkey = this.userService.getLoggedInStatus()
    console.log('Loginkey',Loginkey)
    console.log('url',state.url)
    if (!Loginkey) {
       if(!state.url.includes('/login')){
      window.alert('Access Denied, Login is Required to Access This Page!');

      this.router.navigate(['login']);}
      return false;

    }

    return true;

  }

}

This is the UserService used in AuthGuard

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { signup } from '../data-type';
import { BehaviorSubject } from 'rxjs';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private readonly loggedInKey = 'isLoggedIn';

  isUserLoggedIn = new BehaviorSubject<boolean>(this.getLoggedInStatus());

  constructor(private http: HttpClient, private router: Router) {}

  public getLoggedInStatus(): boolean {
    return !!localStorage.getItem(this.loggedInKey);
  }

  private setLoggedInStatus(status: boolean): void {
    if (status) {
      localStorage.setItem(this.loggedInKey, 'true');
    } else {
      localStorage.removeItem(this.loggedInKey);
    }
  }

  userSignUp(data: signup): void {
    // Call your login API endpoint
    this.http.post('http://localhost:3000/login', data, { observe: 'response' })
      .subscribe(
        (result) => {
          // Handle a successful login
          this.setLoggedInStatus(true);
          this.router.navigate(['main']);
        },
        (error) => {
          // Handle login error
          console.error('Login error:', error);
        }
      );
  }

  userLogout(): void {
    this.setLoggedInStatus(false);
    // Navigate to the login page 
    this.router.navigate(['']);
  }
}

On Console I get state.url = /main/home , when I navigate to login page. That means it is using empty path which redirects to /main/home from AdminModule instead of login. I have understood the problem but can't figure it out. Early replies to the problem will be apretiated, Thanks in Advance!!