title: lazy-loaded child route loads twice in Angular
body: <p>I am confronted with the following issue: the <strong>personal</strong> section which is protected via an <strong>AuthGuard</strong> Service is loaded twice when I navigate to it or by browser refresh. Second time it strips away the query parameters of the URL if I provide any. Here is my app router configuration:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'search',
      redirectTo: '',
      pathMatch: 'full'
    },
    {
      path: '',
      component: BookmarksComponent
    },
    {
      path: 'tagged/:tag',
      component: TagComponent
    },
    {
      path: 'about',
      component: AboutComponent
    },
    {
      path: 'personal',
      loadChildren: 'app/personal/personal-bookmarks.module#PersonalBookmarksModule'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>and the child router configuration</p>
  
  <pre><code>@NgModule({
    imports: [RouterModule.forChild([
      {
        path: '',
        component: PersonalBookmarksComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            component: PersonalBookmarksListComponent
          },
          {
            path: 'new',
            component: NewPersonalBookmarkFormComponent
          },
          {
            path: 'bookmarks/:id',
            component: PersonalBookmarkDetailComponent
          }
        ]
      }
  
    ])],
    exports: [RouterModule]
  })
  export class PersonalBookmarksRoutingModule {}
  </code></pre>
  
  <p>The AuthGuard Service (whereby if it only returns true is the same behaviour):</p>
  
  <pre><code>@Injectable()
  export class AuthGuard implements CanActivate {
  
    constructor(private keycloakService: KeycloakService) {}
  
    canActivate() {
      console.log('AuthGuard#canActivate called');
  
      if (this.keycloakService.isLoggedIn()) {
        return true;
      } else {
        this.keycloakService.login();
      }
    }
  }
  </code></pre>
  
  <p>And the Navbar template:</p>
  
  <pre><code>&lt;nav class="navbar navbar-light bg-faded" id="navbar"&gt;
    &lt;a class="navbar-brand" [routerLink]="['']" routerLinkActive="active"&gt;
      &lt;img src="assets/logo.png" width="35" height="35" class="d-inline-block align-top" alt=""&gt;
      Public Bookmarks
    &lt;/a&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" [routerLink]="['personal']" routerLinkActive="active"&gt;Personal list&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" [routerLink]="['about']" routerLinkActive="active"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="http://www.codingpedia.org/tags/#codingmarks" target="_blank"&gt;Blog&lt;/a&gt;
      &lt;/li&gt;
      &lt;li *ngIf="isLoggedIn else notLoggedIn" class="nav-item"&gt;
        &lt;a class="nav-link" (click)="logout()"&gt;Logout &lt;i class="fa fa-lock"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;ng-template #notLoggedIn&gt;
        &lt;li *ngIf="!keycloakService.isLoggedIn()" class="nav-item"&gt;
          &lt;a class="nav-link" (click)="login()"&gt;Login &lt;i class="fa fa-unlock"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ng-template&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The project is available 
  <a href="https://github.com/Codingpedia/codingmarks" rel="noreferrer">on Github</a> and the faulty behaviour can be tested at <a href="https://www.codingmarks.org/personal" rel="noreferrer">https://www.codingmarks.org/personal</a> by logging in with username/pwd - test@codingmarks.org/Test_user1$</p>
  
  <p><strong>UPDATE</strong>
  Even if I remove <strong>PersonalBookmarksComponent</strong> and move <strong>AuthGuard</strong> to the PersonalBookmarks module the wrong behaviour still persist... The routes for PersonalBookmarksModule look something like the following:</p>
  
  <pre><code>const personalBookmarksRoutes: Routes = [
      {
        path: 'search',
        redirectTo: '',
        pathMatch: 'full'
      },
      {
        path: '',
        component: PersonalBookmarksListComponent,
        canActivate: [AuthGuard],
      },
      {
        path: 'new',
        component: NewPersonalBookmarkFormComponent
      },
      {
        path: 'bookmarks/:id',
        component: PersonalBookmarkDetailComponent
      }
  
  ];
  </code></pre>
  
  <p><strong>UPDATE2</strong>:
  The stripping away of the query parameters was due to the redirection forced when logging in with Keycloak.</p>
  
  <p><strong>False</strong>:</p>
  
  <pre><code>public login(): Promise&lt;any&gt; {
    let options: any;
    options = {redirectUri: environment.HOST + 'personal'};
    return new Promise&lt;any&gt;((resolve, reject) =&gt; {
      KeycloakService.auth.login(options)
        .success(resolve)
        .error(reject);
    });
  }
  </code></pre>
  
  <p><strong>Correct</strong>: </p>
  
  <pre><code>public login(): Promise&lt;any&gt; {
    return new Promise&lt;any&gt;((resolve, reject) =&gt; {
      KeycloakService.auth.login()
        .success(resolve)
        .error(reject);
    });
  }
  </code></pre>