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

How to Load a JSON file in Angular2 Angular2 makes it very easy for us to load data from JSON files, we can do it by simply making a http request. Now let's see how we can do that. To be able to make Http requests we first have to import the HttpModule on the app.module.ts, once you've done that your code should look like this: ...
Angular2 Error: Cannot assign to a reference or variable! ; Zone: ; Task: Promise.then ... This error occurs when you try to define a template reference variable with the same name of an existing variable, like for example in this case: @Component({ selector: 'example', template: ` Name ` }) export class AppComponent { name; } As you can see, the...
Creating an Angular2 Datatable from Scratch PART 2: Filtering the Data Continuing from where we stopped at Part 1, today we're going to add the filter functionality to the table, but before we start let's do some styling. I'm going to use Bootstrap, but if you don't want you don't have to, feel free to style your component as you like. But if you decide to use Bootstra...
Using jQuery with Angular2 I know the idea of using jQuery with Angular2 may seen a little bit weird for lots of you, as we all know, Angular2 is responsible for managing everything related to our view components and DOM elements, it doesn't sound like a good idea to use another framework to do a job Angular can easily do. ...

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>