Skip to main content

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

• 1 min read
Angular

Older Article

This article was published 9 years ago. Some information may be outdated or no longer applicable.

Here’s how to squash the Error: Uncaught (in promise): EmptyError: no elements in sequence error that the Angular router throws at you.

Example

Say you’ve got this route definition:

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

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

The WelcomeComponent loads fine. But when you try to navigate to the TestComponent route, the error fires.

The reason is simple. A match on /test also matches '' (the empty route definition), which triggers a cascade of errors.

The fix

Add pathMatch: 'full' to the empty route definition:

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

That tells Angular to only match when the entire URL is empty. Error gone.