Angular2: Uncaught (in promise): Error: Cannot match any routes: ”

If you’re specifying the routes on your project for the first time you may see the following error on the console when you run it:

core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297
core.umd.js:3468 Error: Uncaught (in promise): Error: Cannot match any routes: ''
    at resolvePromise (zone.js:418)
    at zone.js:395
    at ZoneDelegate.invoke (zone.js:192)
    at Object.onInvoke (core.umd.js:6242)
    at ZoneDelegate.invoke (zone.js:191)
    at Zone.run (zone.js:85)
    at zone.js:451
    at ZoneDelegate.invokeTask (zone.js:225)
    at Object.onInvokeTask (core.umd.js:6233)
    at ZoneDelegate.invokeTask (zone.js:224)ErrorHandler.handleError @ core.umd.js:3468next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102_loop_1 @ zone.js:368drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297
zone.js:344 Unhandled Promise rejection: Cannot match any routes: '' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: ''() Error: Cannot match any routes: ''
    at ApplyRedirects.noMatchError (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:769:20)
    at CatchSubscriber.eval [as selector] (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:747:33)
    at CatchSubscriber.error (http://localhost:3000/node_modules/rxjs/operator/catch.js:52:31)
    at MapSubscriber.Subscriber._error (http://localhost:3000/node_modules/rxjs/Subscriber.js:128:26)
    at MapSubscriber.Subscriber.error (http://localhost:3000/node_modules/rxjs/Subscriber.js:102:18)
    at CatchSubscriber.error (http://localhost:3000/node_modules/rxjs/operator/catch.js:55:34)
    at FirstSubscriber._complete (http://localhost:3000/node_modules/rxjs/operator/first.js:143:25)
    at FirstSubscriber.Subscriber.complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:114:18)
    at MergeAllSubscriber._complete (http://localhost:3000/node_modules/rxjs/operator/mergeAll.js:94:30)
    at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:114:18)consoleError @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297
zone.js:346 Error: Uncaught (in promise): Error: Cannot match any routes: ''()

To fix this error we have to go to the app.routing.ts, I’m assuming you did something like this to define your routes:

const appRoutes: Routes = [
  { path: 'component1', component: Component1 },
  { path: 'component2', component: Component2 }
];

The problem is that we have two routes ('/component1' and '/component2'), and when we access the application with the url http://localhost:3000 there’s nothing to tell angular2 which component should be loaded on the page, that’s why it throws an exception.

The solution is to just specify a default route by adding this line:

{ path: '', component: HomeComponent },

Now if we don’t inform any route on the url we’ll be redirected to the HomeComponent.

Recommended for you

Tutorial: Creating an Angular2 Autocomplete Angular 2 Autocomplete Before we begin I just want to say that I'm not going to use any third-party component for this tutorial, I'm going to create an autocomplete from scratch, my goal is to just make it show the suggestions and allow the user to select one, but if you need more advanced featu...
Angular2 Tutorial: Detecting Clicks Outside the Component Angular2 click detection Sometimes there is a need to detect whether the user is clicking inside or outside our angular2 component, specially if your component has a dropdown element, in this case you need to know exactly where the click occurred in order to perform the right action. In this tut...
Login Screen and Authentication with Angular2 Angular2 Login Screen Before we start I just want to say that in order to easily understand this tutorial you should already have some basic knowledge about Angular 2, it will involve routing, dependency injection and working with multiple components. I don't want to make this tutorial too long,...
Creating an Angular2 Image Gallery In order to make this tutorial easier for beginners I'm going to start by creating the simplest possible gallery, from there I'm going to develop and add more functionalities to it, which will increasingly make the gallery more complex as we proceed. If you are already familiar and have some experie...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>