title: Angular routing redirects to parent route instead of child on page refresh
body: <p>I have the following app routing:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      canActivate: [AuthGuard],
      children:
        [
          {
            path: '',
            redirectTo: '/dashboard',
            pathMatch: 'full'
          },
          {
            path: 'dashboard',
            component: DashboardComponent,
            children:
              [
                {path: 'profile', component: ProfileComponent},
                {path: 'user-management', component: UserManagementComponent},
                {path: 'role-management', component: RoleManagementComponent}
              ]
          }
        ]
    },
    {path: 'login', component: LoginComponent},
    {path:'token-verify',component:TwoFactorVerificationComponent}
  ];
  </code></pre>
  
  <p>So here is my problem .Let's say I am on route <code>dashboard</code>.Navigating to <code>/profile</code> or <code>/user-management</code> works fine using the angular router.However I am facing the following problem If I am on route <code>/dashboard/user-management</code> or <code>/dashboard/role-management</code> and do a page refresh I will get redirected to <code>/dashboard/profile</code>. Any ideas what I am doing wrong?</p>
  
  <p>Here is my auth quard</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import {
    CanActivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
  } from "@angular/router";
  import { Observable } from "rxjs";
  import { UserService } from "../services/user.service";
  import { TokenService } from "../services/token.service";
  
  @Injectable({
    providedIn: "root"
  })
  export class AuthGuard implements CanActivate {
    constructor(
      private tokenService: TokenService,
      private userService: UserService
    ) {}
  
    canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
      console.log(`Requested -&gt; state: ${state.url}`);
      if (this.tokenService.isLoggedIn()) {
        console.log("isLogged in and will return true");
        return true;
      } else {
        console.log("will fail and go to login");
        this.userService.redirectToLogginPage();
        return false;
      }
    }
  }
  </code></pre>
  
  <p>Whenever I do refresh the page the auth guard gets called and it prints </p>
  
  <pre><code>Requested -&gt; state: /dashboard/user-management 
  auth.guard.ts:26 isLogged in and will return true
  </code></pre>
  
  <p>in case I am logged in</p>
  
  <p>After some digging I found that If I refresh the page on <code>dashboard/user-management</code> the OnInit method of that component is actually called but I get redirected in <code>/dashboard/profile</code></p>