Ionic4 Angular AuthGuard works for home page and not for sign in page

Question

I have created an Authguard for my web app and have assigned into several routes like Home, Sign-in, Sign-up etc.

Expected Behavior:

1. Home page - the intention is to show the login page if the user is not logged in
2. Signin , Signup, Forgot Password etc - the intention is to redirect the user to the home page if he has already logged in (to avoid displaying the Sign-in page to a logged in user, if the user types the url in the address bar)

Actual Behavior:

1. If a user who has not logged in visits the home page, he is being redirected to Sign in page, but the page is not displayed.

2. If a user visits the Sign-in page by URL, again the page is not displayed. [ No matter if the user is logged in or not]

3. If I remove the auth guard for the Sign-in page, Loading the home page redirects the user to Sign in page and the page is displayed properly.

My AuthGuard code

 @Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
    private storageService: LocalStorageService
  ) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {

    return this.afAuth.authState.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        const url = route.url.toString();
        if (url === ROUTE_SIGNIN || url === ROUTE_SIGNUP || url.includes(ROUTE_FORGOT_PASSWORD) ) {
          if (loggedIn) {
            this.router.navigate([ROUTE_HOME]);
            return of(false);
          }
        } else if (url === ROUTE_HOME) {
          const skipped = this.storageService.getValue(KEY_SIGNIN_SKIPPED);
          if (!loggedIn && !skipped) {
            this.router.navigate([ROUTE_SIGNIN]);
            return of(false);
          }
        }
        return of(true);
      })
    );
  }
}

EDIT: Routes:

  const routes: Routes = [
  {
    path: '',
    redirectTo: ROUTE_HOME,
    pathMatch: 'full'
  },
  { path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] },
  { path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard]  },
  { path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] },
  { path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard]  },
  { path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
    , canActivate: [AuthGuard]  },
  { path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
    , canActivate: [AuthGuard]  },

];

I can understand that the problem here is with assigning the Authguard to the login page. But I couldn't identify what is causing the problem. Can any of you point me in the right direction?