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.