title: how to lazy load and canActive a module with children routes
body: <p>My idea begun when I thought of using a login view to protect my entire app ( using guards ) and force the user to login if he wants to navigate the main.component (planet.data in this case ). </p>
  
  <p>So I used lazy load ( not relevant ) to planet.module and canActivate inside planet-routing.module.ts but after that I couldn't navigate to planet-detail because the route cannot match the URL segment. </p>
  
  <p>"I solved" this issue adding planet-detail route as a children of 'rovers'. Now it comes the part when I put router-outlet inside planet-data and everything it's ok until I click a planet image to navigate to that image ID. The image ID is right below the planet data view. What im missing ?. I'd like to you point me in the right direction please.</p>
  
  <p>Expected behavior : Navigate to Image ID ( only that route )<a href="https://i.stack.imgur.com/jGQs0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jGQs0.png" alt="enter image description here"></a></p>
  
  <p>// planet-data.component.html</p>
  
  <pre><code>&lt;div class="ui-g"&gt;
      &lt;div class="ui-g-12 ui-md-12"&gt;
          &lt;div class="ui-g-8"&gt;
              &lt;app-title *ngIf="pics"&gt;&lt;/app-title&gt;
          &lt;/div&gt;
          &lt;div class="ui-g-4"&gt;
              &lt;app-dropdown-menu (selected)="onSelect($event)"&gt;&lt;/app-dropdown-menu&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-g-12"&gt;
          &lt;app-no-image class="margin" [cam]="true" [start]="true" *ngIf="!pics"&gt;&lt;/app-no-image&gt;
      &lt;/div&gt;
      &lt;div&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-planet-view class="image" [pics]="pics"&gt;&lt;/app-planet-view&gt;    
  &lt;/div&gt;
  &lt;app-loader&gt;&lt;/app-loader&gt;
  </code></pre>
  
  <p>// planet-detail.component.html</p>
  
  <pre><code>&lt;div class="ui-g"&gt;
      &lt;app-image [picById]="picById"&gt;&lt;/app-image&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>// planet-routing.module.ts</p>
  
  <pre><code>const planetRoutes: Routes = [
      {
          path: '',
          component: PlanetDataComponent,
          children: [
              {
                  path: ':id',
                  component: PlanetDetailComponent,
                  canActivate: [AuthGuardService] },
          ],
          canActivate: [AuthGuardService] },
      ];
  @NgModule({
      imports: [
          RouterModule.forChild(planetRoutes)
      ],
      exports: [RouterModule],
  })
  export class PlanetRoutingModule {}
  </code></pre>
  
  <p>// app.routing-module.ts</p>
  
  <pre><code>const routes: Routes = [
    { path: 'rovers', loadChildren: './planet/planet.module#PlanetModule' },
    { path: '', pathMatch: 'full', redirectTo: '/home' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>// app.component.html</p>
  
  <pre><code>&lt;header&gt;&lt;app-header&gt;&lt;/app-header&gt;&lt;/header&gt;
  &lt;main&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  &lt;footer&gt;&lt;app-footer&gt;&lt;/app-footer&gt;&lt;/footer&gt;
  </code></pre>