Angular2 Browser refresh not working with auth guard

Question

I have searched the internet and could not find an answer. I found this post on the route guard not working on browser refresh, and the solutions did not work because I think it was Firebase-specific.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    MaterialModule,

    HomeModule,
    LoginModule,
    SettingsModule,

    RoutingModule
  ],
  exports: [
    RoutingModule
  ],
  providers: [
    AuthGuardService,
    AuthService,
    /* other services */
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

I have various routes defined in various routing modules:

app-routing.module.ts (global route config)

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

const routes: Routes = [
  // Default route
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

login-routing.module.ts

const routes: Routes = [
  // Login
  {
    path: '',
    component: LoginComponent
   }
];

home-routing.module.ts

const routes: Routes = [
  // Home
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuardService],
    canActivateChild: [AuthGuardService]
  }
];

settings-routing.module.ts

const routes: Routes = [
  // Settings
  {
    path: 'settings',
    component: SettingsComponent,
    canActivate: [AuthGuardService]
  }
];

Below is the Auth Guard I use, which was modified from this article about logging in with jwt:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanLoad, Route } from '@angular/router';
import { AuthService } from '../services';
import { JwtHelper } from 'angular2-jwt';

@Injectable()
export class AuthGuardService implements CanActivate {
  private jwtHelper: JwtHelper = new JwtHelper();

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.navigateToLogin();
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.navigateToLogin();
  }

  private navigateToLogin(): boolean {
    if (localStorage.getItem('token')) {
      // if logged in & token not expired, return true
      if(!this.jwtHelper.isTokenExpired(localStorage.getItem('token'))) {
        return true;
      }
      // if token expired, logout 
      else {
        this.authService.logout();
      }
    }

    // re route to login
    this.router.navigate(['']);
    return false;
  }
}

With this current implementation, here is the behavior:

If user is not logged in

• Going to / works
• Going to /home or /settings in the URL redirects to / (login screen)
• Going to any random URL (like /fjdsakfjkla) redirects to / (login screen)

If user is logged in

• Typing /home or /settings in the URL directs user to correct route
• Going to any random URL (like /fjdsakfjkla) redirects to /home
• Type / (login page) directs user to /home

The problem is, when logged in, during a browser refresh, you are redirected to /home. How do I make it so if the user is logged in, a browser refresh will persist the route? For example, if I was on /settings, a browser refresh would NOT re-route to /home and stay on /settings.

Currently: /settings → browser refresh → /home
Desired: /settings → browser refresh → /settings