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.

Recommended for you

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 @...
Angular2: How to Sort a JSON Dataset by Field To be able to sort an array we don't need anything specific from angular2, it can be accomplished just by using regular javascript, more specifically, we have to use the function sort() from the Array object, let's see an example: someArray.sort(function(a, b){ if ( a.someField < b.someFi...
Angular2 Tutorial: Creating Attribute Directives According to Angular2 documentation, directives are classes that can change the component behavior or/and appearance, which basically means they can add CSS classes and styles, register events and manipulate the component's properties. In this tutorial I'm going to show you how to create a very ...
Adding the Multiselect feature to an Angular2 Autocomplete Angular2 Multi Selection Autocomplete After I wrote the tutorial on how to create an angular2 autocomplete, lots of people have been asking me to add the multiselect feature to it, that's the reason why I decided to write this one. I'm going to continue from where I stopped, so make sure you fol...

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

  1. Codename: Steeve Knight

    Hmm, may not be the only cause.
    I’m getting this also, w/in an ngFor:

    *ngFor="let item of collection.items; let idx = index;"
    // where item: string[]
    <input name="item-{{idx}}" [(ngModel)]="item" type="text"

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>