Posts on this Category



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.

Angular2 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused by: No provider for Http!

If you’re seeing this error when you run your application it’s probably because you’re trying to use http.get without importing the HttpModule.

This is what the error looks like on the browser console:

core.umd.js:5995 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!ErrorHandler.handleError @ core.umd.js:5995(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:5997 ORIGINAL EXCEPTION: No provider for Http!ErrorHandler.handleError @ core.umd.js:5997(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6000 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:6000(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6001 Error: No provider for Http!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1456:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1940:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1971:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3573:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3601:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3564:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3373:25)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9756:56)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.ngfactory.js:16:70)ErrorHandler.handleError @ core.umd.js:6001(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6004 ERROR CONTEXT:ErrorHandler.handleError @ core.umd.js:6004(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6005 DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}ErrorHandler.handleError @ core.umd.js:6005(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
zone.js:484 Unhandled Promise rejection: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider …, originalError: NoProviderError, context: DebugContext} Error: No provider for Http!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1456:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1940:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1971:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3573:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3601:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3564:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3373:25)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9756:56)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.ngfactory.js:16:70)consoleError @ zone.js:484_loop_1 @ zone.js:511drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
zone.js:486 Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!()

The solution is simple, just open your app.module.ts and add the HttpModule to the imports:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }      from '@angular/http';
import { AppComponent }   from './app.component';
import { FormsModule }   from '@angular/forms';
 
@NgModule({
  imports:      [ BrowserModule, HttpModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular2 Error: Cannot assign to a reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!

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: `
        <label for="name">Name</label>
        <input type="text" [(ngModel)]=name #name="ngModel" >
  `
})
export class AppComponent {
	name;
}

As you can see, there’s the template reference variable #name on the input and there’s also a variable called name on my class, this will cause the following error when you try to run the application:

zone.js:355 Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!() Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11686:25)
    at PropertyWrite.visit (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:3156:26)
    at ASTWithSource.visit (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:3342:27)
    at convertCdStatementToIr (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11483:30)
    at CompileEventListener.addAction (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11911:29)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11984:20)
    at Array.forEach (native)
    at collectEventListeners (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11981:18)
    at ViewBinderVisitor.visitElement (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12319:11)
    at ElementAst.visit (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:349:26)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386ZoneTask.invoke @ zone.js:308
zone.js:357 Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!()

The solution for this problem is very simple and obvious, the only thing you have to do is change the name of one of your variables.

Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Lots of people are having this problem since Angular2 introduced NgModule, this error occurs when you try to use something from an specific module without importing it, this is how the error looks on the console:

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <input type="text" class="form-control" id="name"
               required
               [ERROR ->][(ngModel)]=name name="name" >
        <div [hidden]="name.valid || name.pristine" 
             clas"): FormComponent@4:15 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:() Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <input type="text" class="form-control" id="name"
               required
               [ERROR ->][(ngModel)]=name name="name" >
        <div [hidden]="name.valid || name.pristine" 
             clas"): FormComponent@4:15
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:136:47)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386ZoneTask.invoke @ zone.js:308
zone.js:357 Error: Uncaught (in promise): Error: Template parse errors:()

All you have to do to fix this is to import the FormsModule on your app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FormsModule }   from '@angular/forms';
 
@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular2 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

This is a very common error for Angular2 beginners, if you are reading this it’s probably because you’re using the RouterModule module for the first time, you’ve done everything right but when you run your application you see something like this on your firebug:

core.umd.js:3462 EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.ErrorHandler.handleError @ core.umd.js:3462(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
core.umd.js:3468 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (common.umd.js:669)
    at provideLocationStrategy (router.umd.js:3602)
    at NgModuleInjector.get (AppModule.ngfactory.js:125)
    at NgModuleInjector.get (AppModule.ngfactory.js:130)
    at NgModuleInjector.get (AppModule.ngfactory.js:167)
    at NgModuleInjector.get (AppModule.ngfactory.js:177)
    at NgModuleInjector.AppModuleInjector.getInternal (AppModule.ngfactory.js:235)
    at NgModuleInjector.get (core.umd.js:7221)
    at ApplicationRef_._loadComponent (core.umd.js:7070)
    at ApplicationRef_.bootstrap (core.umd.js:7058)ErrorHandler.handleError @ core.umd.js:3468(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
zone.js:344 Unhandled Promise rejection: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document. ; Zone: <root> ; Task: Promise.then ; Value: Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.() Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js:669:23)
    at provideLocationStrategy (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3602:13)
    at NgModuleInjector.get (AppModule.ngfactory.js:125:77)
    at NgModuleInjector.get (AppModule.ngfactory.js:130:84)
    at NgModuleInjector.get (AppModule.ngfactory.js:167:151)
    at NgModuleInjector.get (AppModule.ngfactory.js:177:132)
    at NgModuleInjector.AppModuleInjector.getInternal (AppModule.ngfactory.js:235:66)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7221:31)
    at ApplicationRef_._loadComponent (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7070:44)
    at ApplicationRef_.bootstrap (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7058:18)
zone.js:346 Error: Uncaught (in promise): Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.()

Lucky for you this problem is very easy to solve, you just have to go to your index.html and add the following line on the head:

<head>
  <base href="/">
  ...
</head>

There, problem solved!!