6

I am not able to navigate from login page to dashboard 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 siblings routing works fine. What is the issue when I make child routes ? I am using cli 1.6.0-rc.1

What I have tried so far ?

  1. Commenting AuthGuard did not work so the problem is not with that part

  2. I have verified that only when I have them as children routes(which I need for making breadcrumbs) this problem occurs. If all the routes are siblings, the routing works properly

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

  4. searched on SO for similar titled questions but none has addressed the same issue:

Angular 2.0.1 Router EmptyError: no elements in sequence

Angular2 routing issues - Zone aware error No elements in sequence

Angular 2.0.1 Router EmptyError: no elements in sequence

A_J
  • 977
  • 4
  • 16
  • 44

1 Answers1

13

This bug is due to the last version of Angular's Router. Please remove revert back angular version 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 issue here

Nasruddin
  • 1,640
  • 14
  • 20
  • I am already using pathMatch: 'full' in my routes in the code I have posted in the question but still it gives the same error. – A_J Dec 03 '17 at 08:12
  • The link you provided says the issue occurs with RxJs 5.5.3 but I am using RxJs 5.5.2 as I checked in package.json file – A_J Dec 03 '17 at 08:15