Angular 7 navigate is changing URL accordingly BUT doesn't load the component

Question

after trying every other solution, i am still stuck with my problem which is : trying to navigate to other component, URL changed but i stay on the same page, destination component is not load.

Explanation:

When the user arrive on App, based on session storage, he goes to HOME component or LOGIN component.

• If he land on HOME component, EVERYTHING's work, he can navigate everywhere in the app.

• otherwise, if he land on LOGIN, then log himself and then is redirecting to HOME component, only then no more navigation work, only url is changing.

I used lazy-loading and authGuard.

No Error on console.

The router tracing log between the 2 cases above are identical ( i mean in the second case, the NavigationEnd component is the right destination component but it is never loaded)

Here's my app-routing.module.ts:

 const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomeModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'description',
    loadChildren: './pages/description/description.module#DescriptionModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'nsp',
    loadChildren: './pages/nsp/nsp.module#NspModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: 'mappings',
    loadChildren: './pages/mappings/mappings.module#MappingsModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'performances',
    loadChildren: './pages/performances/performances.module#PerformancesModule',
    canActivate: [AuthGuard]
  }
];

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

Here's my auth-guard.service.ts:

export class AuthGuardService implements CanActivate {

  constructor(private storageFactory: StorageFactoryService, 
              public auth: AuthentificationService, 
              public router: Router) {}

  session_date_expire_on: string;

  canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (this.storageFactory.get('ssid_expires_on') != null) {
      var date_stored = 
                  new Date(this.storageFactory.get('ssid_expires_on').value);
    } 
    var current_date = new Date();

    if (typeof this.storageFactory.get('userid') !== 'undefined' &&
        this.storageFactory.get('userid') !== null && 
        date_stored > current_date) {

      this.storageFactory.remove('ssid_expires_on');
      this.session_date_expire_on = new Date(current_date.getTime() +
                                      environment.inactivity_timeout).toString();
      this.storageFactory.set('ssid_expires_on', this.session_date_expire_on);
      current_date = null;
      return true;
    }

    localStorage.clear();
    sessionStorage.clear();
    this.router.navigate(['/login']);
    return false;   
  }
}

my app.component.ts is redirecting directly to HOME component, thus authGuard is called and redirect to LOGIN if needed:

export class AppComponent implements OnInit {

constructor(private checkSessionService: CheckSessionService, 
            private storageFactory: StorageFactoryService, 
            private ElementRef: ElementRef, 
            private api_user: AuthentificationService, 
            private router: Router) { }

  ngOnInit() {
    console.log("--------- App Component ---------");
    this.router.navigate(['/home']);
  }
}

The problem is when i go to login.component.ts and click on log function, if user if authentified, it goes to HOME and then no navigation is working :

export class LoginComponent implements OnInit {
  user: UserInfo;
  current_date = new Date();
  session_date_expire_on: string;
  access_granted: boolean;

  constructor(private ngZone: NgZone, 
              private storageFactory: StorageFactoryService, 
              private api_user: AuthentificationService, 
              private router: Router, 
              private route: ActivatedRoute) { }

  ngOnInit() {}

  log() {
    return this.api_user.getUser().subscribe(response => {
      if (response.status == 200) {

        this.user = response.body;
        this.session_date_expire_on = new Date(this.current_date.getTime() +
                                      environment.inactivity_timeout).toString();
        this.storageFactory.set('userid', this.user.userId);
        this.storageFactory.set('usercountry', this.user.entityCountryName);
        this.storageFactory.set('userrights', this.user.profile[0]);
        this.storageFactory.set('ssid', uuid());
        this.storageFactory.set('ssid_expires_on', this.session_date_expire_on);

        this.router.navigate(['/home']);

      } else {
        this.router.navigate(['/login']);
      }
    })
  }
}

Do you have any ideas ?

I already tried the .. --> this.router.navigate([../home])

Answer 1

I've figured out my problem. It was because of conditions *ngIf on my <router-outlet><router-outlet>.

so my problem was that one router-outlet got registered and no matter what you do, next router-outlet didn't respond to the route changes.

I removed my conditions and it worked.

Thanks you.