title: Angular 7 navigate is changing URL accordingly BUT doesn't load the component
body: <p>after trying every other solution, i am still stuck with my problem which is : trying to navigate to other component,<b> URL changed but i stay on the same page, destination component is not load</b>.</p>
  
  <p>Explanation:</p>
  
  <p>When the user arrive on App, based on session storage, he goes to <b>HOME component</b> or <b>LOGIN component</b>. </p>
  
  <ul>
  <li><p>If he land on HOME component, <b>EVERYTHING's work</b>, he can navigate everywhere in the app. </p></li>
  <li><p>otherwise, if he land on LOGIN, then log himself and then is redirecting to HOME component, <b>only then</b> no more navigation work, only url is changing. </p></li>
  </ul>
  
  <p>I used lazy-loading and authGuard.</p>
  
  <p>No Error on console. </p>
  
  <p>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) </p>
  
  <p>Here's my <code>app-routing.module.ts</code>: </p>
  
  <pre class="lang-js prettyprint-override"><code> 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 { }
  </code></pre>
  
  <p>Here's my <code>auth-guard.service.ts</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>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' &amp;&amp;
          this.storageFactory.get('userid') !== null &amp;&amp; 
          date_stored &gt; 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;   
    }
  }
  </code></pre>
  
  <p>my <code>app.component.ts</code> is redirecting directly to HOME component, thus authGuard is called and redirect to LOGIN if needed: </p>
  
  <pre class="lang-js prettyprint-override"><code>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']);
    }
  }
  </code></pre>
  
  <p>The problem is when i go to <code>login.component.ts</code> and click on log function, if user if authentified, it goes to HOME and then no navigation is working : </p>
  
  <pre class="lang-js prettyprint-override"><code>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 =&gt; {
        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']);
        }
      })
    }
  }
  </code></pre>
  
  <p>Do you have any ideas ? </p>
  
  <p>I already tried the <code>..</code> --> <code>this.router.navigate([../home])</code></p>