Búsqueda de sitios web

typescript - el componente de la aplicación se carga incluso antes de que el guardián de Angular revise los datos de la API

Tengo una aplicación Angular cuyo app.component.html se ve como se muestra a continuación:

<div>
    <app-nav-bar></app-nav-bar>
</div>
<div>
 <router-outlet></router-outlet>
</div>

y 'app-nav-bar' es un componente que se carga al iniciar esta aplicación de Angular, cuyo nav-bar.component.ts tiene 'ngAfterViewInit' con algunos mensajes en la consola como se muestra a continuación:

ngAfterViewInit() { console.log("la barra de navegación se carga"); }

y tengo un módulo de enrutamiento (app-routing.module.ts) que define el enrutamiento como sigue:

const routes: Routes = [
 {path:'accessdenied',component:AccessDenied },
 { path: 'region', loadChildren:'//pathToSharedModule#RegionSharedModule',canActivate:[AuthguardGuard]},
 {path:'names',loadChildren:'Path'},
 {path: '**',component:RegionSharedModule ,canActivate:[AuthguardGuard]}

Usé el servicio guard de Angular para autorizar a los usuarios basándome en una API y activar las rutas respectivas. authguard.guard.ts

import { Injectable } from '@angular/core';
//some other basic modules got imported
@Injectable({
  providedIn: 'root'
})
export class AuthguardGuard implements CanActivate {
 constructor(private router:Router,private shared:SharedServiceContainer,private api:ApiService){}
 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  
        return this.api.getDataFrmAPi(//sever-api).pipe(map(res =>{
    
    if(res["status"] == "success"){
      console.log("success in auth-guard");
      let perms = res["data"]
      this.shared.permissions = perms; //am assigning values to a shared service variable
          if(perms.read_write){ //if user has read_write permission allow access to page
             //console throws an error No component factory found
            return true;
          } 
          else if(perms.read_only){ //if user has read_only , navigate to 'names' route
            
            this.router.navigate(['/names']);
            return false;
          }
          else{ //else redirect to a component that shows 'access denied' msg
            
            this.router.navigate(['/accessdenied']);
            return false;
          }         
    }
    else{
      this.router.navigate(['/accessdenied']);
    }
    
     }));
  

   }

 }

No he agregado 'AuthguardGuard' en ninguna de las declaraciones o componentes de entrada de app.modules.ts, ahora me enfrenté a un par de problemas como los siguientes.

  1. nav-bar.component.ts se carga primero, luego auth-guard como se muestra a continuación: Pero esperaba que auth-guard autorizara primero y cargara app-component.html,

    la barra de navegación se carga //se imprimió en la consola desde app-nav-bar.ts éxito en auth-guard //se imprimió en la consola desde auth-guard.guard.ts

  2. este error a continuación es de angular-auth-guard

    ERROR Error: No capturado (en la promesa): Error: No se encontró la fábrica de componentes para e. ¿Lo agregaste a @NgModule.entryComponents? Error: No se encontró la fábrica de componentes para e. ¿Lo agregaste a @NgModule.entryComponents?

Artículos relacionados