Resolving Error: Uncaught (in promise): EmptyError: no elements in sequence

Introduction
Resolving Error: Uncaught (in promise): EmptyError: no elements in sequence

In this article we'll see how to fix the Error: Uncaught (in promise): EmptyError: no elements in sequence error caused by the Angular router.

Example

Consider the following example with a sample route definition:

const routes: Routes = [
  { path: '', component: WelcomeComponent },
  { path: 'test', component: TestComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

When we load the application, the WelcomeComponent will load fine but when we try to nagivate away from that page and load the route belonging to TestComponent the aforementioned error will be displayed.

The reason behind this is rather simple. A match on /test is going to also match '' (the empty route definition) which will generate a bunch of errors.

The fix

To fix this problem the pathMatch: 'full' property needs to be applied to the empty route definition:

{ path: '', component: WelcomeComponent, pathMatch: 'full' },

The error should now be gone.

Author

Tamas Piros

Developer Evangelist, experienced Technical Trainer and Google Developer Expert in Web Technologies. Active conference speaker, passionate about the latest & greatest advancements in web technologies.

View Comments
Next Post

Adapter pattern in TypeScript

Previous Post

Singleton Pattern in TypeScript