如何延迟加载和canActive模块与子路由

Question

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 ).

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.

"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.

Expected behavior : Navigate to Image ID ( only that route )

// planet-data.component.html

<div class="ui-g">
    <div class="ui-g-12 ui-md-12">
        <div class="ui-g-8">
            <app-title *ngIf="pics"></app-title>
        </div>
        <div class="ui-g-4">
            <app-dropdown-menu (selected)="onSelect($event)"></app-dropdown-menu>
        </div>
    </div>
    <div class="ui-g-12">
        <app-no-image class="margin" [cam]="true" [start]="true" *ngIf="!pics"></app-no-image>
    </div>
    <div>
    </div>
    <router-outlet></router-outlet>
    <app-planet-view class="image" [pics]="pics"></app-planet-view>    
</div>
<app-loader></app-loader>

// planet-detail.component.html

<div class="ui-g">
    <app-image [picById]="picById"></app-image>
</div>

// planet-routing.module.ts

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 {}

// app.routing-module.ts

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 { }

// app.component.html

<header><app-header></app-header></header>
<main>
    <router-outlet></router-outlet>
</main>
<footer><app-footer></app-footer></footer>

Answer 1

Well, with some help I could fix this issue generating another component and declaring it inside the children route. The parent route and the first children route are both '', so inside the parent route I just putted router-outlet wich is the one who is gonna display the child routes. The first child route It's gonna display the presentional data.

// planet-routing.module.ts

const planetRoutes: Routes = [
    {
        path: '',
        component: PlanetComponent, -> Component generated to display child route
        canActivate: [AuthGuardService],
        children: [
            {
                path: '',
                component: PlanetDataComponent
            },
            {
                path: ':id',
                component: PlanetDetailComponent
            }
        ]
    }
];

// planet.component.html

<router-outlet></router-outlet>