Angular 5 EmptyError: no items in sequence when creating child routes

Question

I cannot go from the login page to the control panel page when I use children in routing as follows:

const appRoutes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginComponent,pathMatch: 'full' }, { path: 'dashboard',pathMatch: 'full', /* canActivate: [AuthGuard], */ component: DashboardComponent , children: [ { path: 'online-submission/:moduleName',pathMatch: 'full', component: OnlineSubmissionComponent, /* canActivate: [AuthGuard], */data:{ breadcrumb: "online-submission" } , children: [ { path: 'batch-upload-members',pathMatch: 'full', component: BatchUploadMembersComponent, /* canActivate: [AuthGuard], */data:{ breadcrumb: "batch-upload-members" } }, { path: 'select-members',pathMatch: 'full', component: SelectMembersComponent, /* canActivate: [AuthGuard], */data:{ breadcrumb: "select-members" } } ] } ] }, { path: '**', component: PageNotFoundComponent } 

];

However, when I remove the children attribute from the routes and make them, the Brazilian brothers work fine. What is the problem when I do children's routes? I am using cli 1.6.0-rc.1

What have i tried so far?

• AuthGuard commenting does not work, so the problem is not that this part

• I checked that only when I have them as children’s routes (which I need to create crackers) does this problem arise. If all routes are siblings, routing works correctly

• used {enableTracing:true} in RouterModule.forRoot , where I find NavigationStart(id: 4, url: '/dashboard') , which seems to be the correct URL for the DashboardComponent

• search on SO for similar named questions, but none of them raised the same problem:

Angular 2.0.1 Router EmptyError: no items in sequence

Angular2 routing problems - zone related error No items in sequence

Angular 2.0.1 Router EmptyError: no items in sequence

Answer 1

This error is related to the latest version of Angular Router. Uninstall the returned version of Angular or add pathMatch: "full" to your routes.

 export const userRoutes = [ { path: 'profile', component: ProfileComponent, pathMatch: 'full' }, { path: 'login', component: LoginComponent, pathMatch: 'full' } ]; export const appRoutes = [ { path: '', redirectTo: '/events', pathMatch: 'full' }, { path: 'user', loadChildren: './user/user.module#UserModule' } ]; 

You can find the problem here.