app component loads even before angular guard checks for data from API

Question

i have an angular app whose app.component.html looks as below:

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

and 'app-nav-bar' is a component which gets loaded on launch of this angular app, whose nav-bar.component.ts has 'ngAfterViewInit' with some console messages as below:

ngAfterViewInit() { console.log("nav bar gets loaded") ; }

and i have a routing module (app-routing.module.ts) which defines routing as below :

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

i used angular guard service to authorize the users based on an api and activate respective routes. 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']);
    }
    
     }));
  

   }

 }

i have not added 'AuthguardGuard' in any of declarations or entry components of app.modules.ts, now i faced couple of issues like below.

1. nav-bar.component.ts is loaded first ,then auth-guard as below:But i was expecting auth-guard to authorize first and load app-component.html,

   nav bar gets loaded //console printed from app-nav-bar.ts success in auth-guard //console printed from auth-guard.guard.ts

2. this below error is from angular-auth-guard

   ERROR Error: Uncaught (in promise): Error: No component factory found for e. Did you add it to @NgModule.entryComponents? Error: No component factory found for e. Did you add it to @NgModule.entryComponents?