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

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

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.