Проблемы с angular маршрутизацией

Question

Я определил мой angular маршрут для перенаправления на страницу входа, когда пользователь не вошел в систему, но каждый раз, когда я принудительно закрываю свой браузер и повторно посещаю свое приложение angular через localhost: 4200 / Я не получаю редирект и мое приложение показывает пустые компоненты и не перенаправляет. Я разработал его для перенаправления на вход в систему, если пользователь не вошел в систему с помощью AuthGuard, но даже когда пользователь вошел в систему, и я могу видеть данные приложения в моем localStorage, страница остается почти пустой более или менее. Я знаю, что-то не так, но я просто не могу понять это. Это мой app-routing.module.ts:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SignupComponent } from './views/auth/signup/signup.component';
import { LoginComponent } from './views/auth/login/login.component';
import { ResetComponent } from './views/auth/reset/reset.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ErrorPageComponent } from './views/error-page/error-page.component';
import { ToastrModule } from 'ngx-toastr';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

const routes : Routes = [
  {
    path : '',
    redirectTo : '/login',
    pathMatch : 'full'
  },
  {
    path : 'login',
    component : LoginComponent
  },
  {
    path : 'signup',
    component : SignupComponent
  },
  {
    path : 'passwordreset',
    component : ResetComponent
  },
  {
    path : '**',
    component : ErrorPageComponent,
    data : { title : 'Page Not Found'}
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpClientModule,
    MatCheckboxModule,
    MatButtonModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes, {enableTracing : false, useHash : true}),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Вот мой компонент входа:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { LoginValidator } from 'src/app/shared/util/validators/login.validators';
import { Title } from '@angular/platform-browser';
import { LoginService } from 'src/app/shared/services/login.service';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  /**
   * Page Title
   *
   * @var String
   */
  title = '';

  /**
   * Variable to check if animation class is needed
   *
   * @var Boolean
   */
  isShakeClassNeeded : Boolean = false;

  /**
   * A variable to check if the user checked the 'remember me' checkbox
   *
   * @var Boolean
   */
  isRememberChecked : Boolean = true;

  /**
   * Check if the form has been submitted
   *
   * @var Boolean
   */
  isFormSubmitted : Boolean;

  /**
   * If the form is invalid or contains invalid input
   *
   * @param Boolean
   */
  isFormInValid : Boolean = false;

  /**
   * If the login details provided are correct. This should be true
   * else display an error message
   *
   * @param Boolean
   */
  isLoginInValid : Boolean = false;

  /**
   * Whether the server return a 'Bad Request' error code
   *
   * @var Boolean
   */
  isBadRequestResponse : Boolean = false;

  /**
   * Whether the server returned a '404 Not Found' error code
   *
   * @var Boolean
   */
  isError404 : Boolean = false;

  /**
   * Loading animation
   * @var Boolean
   */
  loading : Boolean = false;

  /**
   * Login Form Using Reactive Form Approach
   */
  loginForm = new FormGroup({
    loginemail : new FormControl('', [Validators.required, Validators.email, LoginValidator.cannotContainSpaces]),
    loginpassword : new FormControl('', [Validators.required, Validators.minLength(6)])
  });

  /**
   * The previous page the user was at
   * @var string
   */
  returnUrl : string;

  /**
   * If the login button has been clicked, set this to true
   * @var Boolean
   */
  isLoginProgressing : Boolean = false;

  /**
   * Class Constructor
   *
   * @param None
   */
  constructor(
    private router : Router,
    private pageTitle : Title,
    private loginService : LoginService,
    private route : ActivatedRoute,
    private toastrService : ToastrService
    )
    {
      this.pageTitle.setTitle(this.title);
    }

    ngOnInit(): void {
      if(!localStorage.getItem('LoggedInUser')){
        this.loginService.logout();
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/login';
      }else
        this.router.navigate([this.returnUrl ? this.returnUrl : 'dashboard']);
    }

  /**
   * Handles form submission and login
   *
   * @param None
   */
  formSubmitted(){
    this.isFormSubmitted = true;
    this.isLoginProgressing = true;

    if(!this.loginForm.valid){
      this.isFormInValid = true;
      this.isShakeClassNeeded = true;
      this.isLoginProgressing = false;
    }else{
      this.loginService.login(this.email.value, this.password.value)
        .subscribe( response => {
          if(response){
            this.isLoginProgressing = false;
            let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')
            this.router.navigate([returnUrl || '/dashboard'])
          }else{
            this.isLoginInValid = true;
            this.isShakeClassNeeded = true;
            this.isLoginProgressing = false;
          }
        },
          error => {
            if(error.status == 400){
              this.isShakeClassNeeded = true;
              this.isBadRequestResponse = true;

              this.isLoginProgressing = false;
              this.toastrService.error('Something went wrong. Please check your connection', 'Login Error', {
                timeOut : 34000
              });
            }else if(error.status == 404){
              this.isShakeClassNeeded = true;
              this.isError404 = true;
              this.isLoginProgressing = false;
            }
          }
        );

    }
  }


  /**
   * Get the email from the formGroup control
   *
   * @param None
   */
  get email(){
    return this.loginForm.get('loginemail');
  }

  /**
   * Get the password from the formGroup control
   *
   * @param None
   */
  get password(){
    return this.loginForm.get('loginpassword')
  }

}

, а это мой AuthGuard:

import { LoginService } from './login.service';
import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  /**
   *Class Constructor
   *
   * @param router
   */
  constructor(private router : Router, private loginService : LoginService) {}

   /**
    * Implements interface method: 'canActivate'
    */
   canActivate(route : ActivatedRouteSnapshot, state : RouterStateSnapshot){
      if(localStorage.getItem('LoggedInUser')){
        return true;
      }else{
      this.router.navigate(['/login'],
        { queryParams :
          {
            returnUrl : state.url
          }
        });
      }

      return false;
   }
}

Вот как выглядит мой URL в данный момент, когда я активно работаю над проектом и перекомпилирую:

И вот так он выглядит после закрытия моего браузера и повторного открытия:

Если я вошел в систему ранее и имел URL-адрес типа: `` `localhost: 4200 / # / dashboard``, прежде чем закрыть браузер без выхода из системы, я бы хотел URL-адрес останется неизменным после повторного открытия, пока в localStorage есть пользовательские данные.

Мой app.component.ts выглядит следующим образом:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent{
  title = '';
}

Поскольку проект имеет панель администратора Я определил дочерние маршруты в разных модулях и связал их с app.module.ts с помощью основного модуля маршрутизации (здесь не включен). Я не имею ни малейшего представления о том, как go найти ошибку, потому что в console.log () нет ошибок. Пожалуйста, как мне это исправить, то есть, если я что-то понимаю.

Вот как я могу использовать canActivate с AuthGuard для защиты своей внутренней панели инструментов и любого другого маршрута администратора:

import { AuthGuard } from 'src/app/shared/services/auth-guard.service';
import { DashboardComponent } from './dashboard.component';

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes : Routes = [
  {
    path: '',
    component : DashboardComponent,
    canActivate : [AuthGuard]
  }
];

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

Здесь это модуль Dashboard, в котором указан мой компонент:

import { MatProgressBarModule } from '@angular/material/progress-bar'
import { MatTableModule } from '@angular/material/table';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { NgModule } from '@angular/core';
import {MatPaginatorModule} from '@angular/material/paginator'

@NgModule({
  declarations : [
    DashboardComponent
  ],
  imports: [CommonModule, MatProgressBarModule, MatPaginatorModule, MatTableModule, DashboardRoutingModule],
  exports : [RouterModule]
})
export class DashboardModule { }

Вот мой модуль макета бэкэнда, где каждый компонент подключен к маршруту

import { RouterModule, Routes } from '@angular/router';
import { BackendLayoutComponent } from './backend-layout.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthGuard } from 'src/app/shared/services/auth-guard.service';

const routes : Routes = [
  {
    path : '',
    component : BackendLayoutComponent,
    canActivate : [AuthGuard],
    children : [
      {
        path : 'dashboard',
        loadChildren : () => import('src/app/views/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
      {
        path : 'brand',
        loadChildren : () => import('src/app/views/brand/brand.module').then(m => m.BrandModule)
      },
      {
        path : 'accounting',
        loadChildren : () => import('src/app/views/accounting/account.module').then(m => m.AccountModule)
      },
      {
        path : 'report',
        loadChildren : () => import('src/app/views/report/report.module').then(m => m.ReportModule)
      },
      {
        path : 'staff',
        loadChildren : () => import('src/app/views/staff/staff.module').then(m => m.StaffModule)
      },
      {
        path : 'workspace',
        loadChildren : () => import('src/app/views/workspace/workspace.module').then(m => m.WorkspaceModule)
      }
    ]
  },

];

@NgModule({

  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports : [
    RouterModule
  ]
})
export class LayoutRoutingModule { }