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 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 ...
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 Datatable from Scratch Some time ago I've posted a tutorial on how to create a datatable with ag-grid, it didn't take long before people start complaining that ag-grid wasn't working the way I described in the tutorial, that's because angular2 is changing rapidly rendering the component and/or the tutorial obsolete. To...
Angular2: How to Pass Callback Functions to a Component There are lots of situations where it's useful to pass a function to an angular2 component, for instance, when our component is a dialog and we have to perform an specific task when it closes, or pass the action of one of its buttons, or even events like keypress, resize, mouseover, etc. If you're r...

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>