Angular2 nested-child-routing not working

Question

Angular2 nested-child-routing not working. My page's structure which includes nested child route is as following:

-Home
-Signup  -> 
    User1 -> 
        Result ->
            1.Todo1_Query  ->  Todo1_QueryID
            2.Todo2_Query  ->  Todo2_QueryID
            3.Todo3_Query  ->  Todo3_QueryID

When I click on Todo1_Query (which is the end result), it should be able to be displayed on the same place (cluster) but it shows an errormessage that says it can not find any data.

404: page missing

Has anyone any idea how it could work? Thanks.

app.component.ts

app.component.ts

 export const ROUTES: Routes = [
     { path: '',      component: HomeComponent },
     { path: 'home',  component: HomeComponent },
     { path: 'signup', component: SignupComponent, resolve: { db: DBReady } }, 
     { path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
     {
         path: 'user',
         component: UserComponent, canActivate: [DBLoggedIn],
         children: [
         {
             path: "",
             component: UserComponent
         },

         {
             path: 'Result',
             component: ResultComponent,
             children: [

             {
                 path: 'todo1',
                 component: Todo1Component,
                 children: [{
                     path: ':id',
                     component: Todo1SelectionComponent

                 }]
             },
             {
                 path: 'todo2',
                 component: Todo2Component,

                 children: [{
                     path: ':id',
                     component: Todo2SelectionComponent

                 }]
             },
             {
                 path: 'todo3',
                 component: Todo3Component,
                 children: [{
                     path: ':id',
                     component: Todo3SelectionComponent
                 }]

             } 
         ]
       }
     ]
   },

   { path: '**',    component: NoContentComponent },
 ];

todo1.component.ts

 import { Todo1SelectionComponent } from './todo1-selection';

 @Component({

     selector: 'todo1-app',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     template: `
      <h5>{{title}}</h5>

       <div *ngFor="let item of Todo1" class="panel panel-info"  [routerLink]="['/todo1', item.key]">
           {{ item.name }} </div>
   `
 })
 export class Todo1Component implements OnInit, OnChanges {


     public Todo1: Array <model.Todo>;
     public title = 'Todo1';

     @Input() Todo1: Array <model.Todo>;
     @ViewChild(Todo1SelectionComponent) todo1selection: Todo1SelectionComponent;

     constructor(private router: Router, private route: ActivatedRoute) {
     }

     ngDoCheck() { }

     ngOnChanges() { }

     }



     ngOnInit() {
         console.log("Todo1Component");

         }

     }     
     ngAfterViewInit() {

         console.log("ngAfter");
       }
     }
     ngOnDestroy() { }
 }

result.component.ts

 @Component({

 -> html url 
     select checkbox
     button function submit()
 ->
 -> children in panels
 -> 1.todo1
     <todo-app1 [todo1]=todo1></todo-app1>
     <router-outlet></router-outlet>
 ->2.todo2
     <todo-app2 [todo2]=todo2></todo-app2>
    < router-outlet></router-outlet>
 ->3.todo3
     <todo-app3 [todo3]=todo3></todo-app3>
     <router-outlet></router-outlet>
 -> end panel

 ->

 })

 export class resultComponent implements DoCheck, OnChanges, OnInit {

     public todo1: Array <model.Todo>;
     public todo2: Array <model.Todo>;
     public todo3: Array <model.Todo>;


     @ViewChild(Todo1Component) todo1Component: Todo1Component;
     @ViewChild(Todo2Component) Todo2Component: Todo2Component;
     @ViewChild(Todo3Component) Todo3Component: Todo3Component;

     submit(){

         this.todo1=data1;
         this.todo2=data2;
         this.todo3=data3;

    }  } 

Answer 1

See the below lines in your code

{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
    {
        path: 'user',
        component: UserComponent, canActivate: [DBLoggedIn],
        children: [

user route is repeated twice. Thats the issue