Cannot assign to a reference or variable! Angular 6

cannot assign value $event'' to template variable
nativescript cannot assign to a reference or variable!
ngmodel in ngfor angular 6
ngmodel array angular 6
mat-error template driven form
angular 5 template driven form validation example
angular template variable
no value accessor for form control with unspecified name attribute

I am creating an validation form using Ionic 3 and Angular 6 but I am running into a problem. When I run my application I get these error messages

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

and I believe the reason I am getting these error messages is when I add this line of code to my "ion-input" tag

[ngClass]="{'is-invalid':f.submitted && email.invalid}"

I double check my work to make sure it matches a tutorial and I still can't find where the bug is forming. Can someone please lend a hand? Here is my code

HTML

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form name="form" #f="ngForm" novalidate>
  <ion-list>
    <ion-item>
        <ion-label for="email" fixed>email</ion-label>
        <ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{'is-invalid':f.submitted && email.invalid}" name="email" class="form-control" required></ion-input>
        <div class="invalid-feedback">
          <div>Email is required</div>
        </div>
    </ion-item>
    <button ion-button block type="button" (click)="login()" > Sign In</button>
    <button ion-button block outline type="button" (click)="goToSignup()" > Sign Up</button>
</ion-list>
</form>
</ion-content>

TS File

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormsModule } from '@angular/forms';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  email: string;
  password : string; 
  model:any = {}
  constructor(public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
   this.aAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(
     e => {console.log(e)}
     )
  }

  goToSignup(){
    this.navCtrl.push(SignupPage)
  }

}

You have used two ngModel to point to different variables. Remove the one which is not required.

<ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" ....

Error: Cannot assign to a reference or variable! · Issue #293 , How can i find where this error occurs? I can't figure this out :( System.Exception: Call to Node module failed with error: Error: Cannot assign to  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Uncaught Error: Cannot assign to a reference or > variable! > at _AstToIrVisitor.visitPropertyWrite

It seems like your component variable and your template variable are colliding:

<ion-input ... [(ngModel)]="email" ... #email="ngModel"** ...></ion-input>

TS File

email: string;
password : string; 

You should change the name of one, for example change it to Email

CLI: 8.3.0 + iVY = ERROR in Error: Cannot assign to a reference or , ERROR in Error: Cannot assign to a reference or variable! at _AstToIrVisitor. Angular CLI: 8.3.0 Node: 10.15.3 OS: linux x64 Angular: 9.0.0-next.3 name: '​entry', value: PropertyRead { span: ParseSpan { start: 6, end: 12 }  I can&#39;t figure this out :( System.Exception: Call to Node module failed with error: Error: Cannot assign to a reference or variable! at _AstToIrVisit Skip to content TrilonIO / aspnetcore-angular-universal

Apparently you get this when you attempt to set a context variable in the template as well

<ng-container *ngTemplateOutlet="example; context:{thing: thing}"></ng-container>
<ng-template #example let-thing="thing">
    <button (click)="thing = !thing">Click me</button>
</ng-template>

Compiles and works except on ng build --prod. Took me a while to track this down today after a large refactor. Gotta remember to build (prod) often!

Cannot assign to a reference or variable! #5980, Error: Cannot assign to a reference or variable! at _AstToIrVisitor.push../​node_modules/@angular/compiler/fesm5/compiler.js. has incorrect peer dependency "@angular/common@>=6.0.0-beta.0 <7.0.0". warning  with ng b: The error occurs at runtime instead, giving a Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!, and the stack trace points at vendor.bundle.js. Expected behavior.

In my .ts file, I have declared a variable with the same name as the template reference in the html file, hence the error

file.ts

...
private uploadFile:File
...

file.html

<input #uploadFile type="file"/>

Unhandled Promise rejection: Cannot assign to a reference or , Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable! ionic ionic-v3 · BenImad June 25, 2019, 6:11am #1. PS C:\Users\merlin\source\repos\PlasticsTrader\angular> yarn yarn install v1.12.3 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files.

"Cannot assign to a reference or variable!" - angular, Ask questionsAdd line numbers / file name for error: "Cannot assign to a reference or variable!" <!-- IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION  If you want a reference to an input you can just use #myLocalName without setting to anything. But you shouldn't need it at all. Reference your controls through form.controls.input; Github happens to be a poor venue for this type of material, as it isn't about a bug in the Angular library. It is better asked on StackOverflow, or Gitter.

Error: Cannot assign to a reference or variable! Angular 4 - html, Error: Cannot assign to a reference or variable! 3 answers Angular template validation form 2 answers I am getting an error in angular 4 after adminPassword.errors">Password is required</div> <div class="col-md-6" style=​"text-align:  Apr 6, 2018 · 2 min read. A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component (Read more at Angular.io ). That means you can easily access the variable anywhere in the template.

Error: Uncaught (in promise): Error: Cannot assign to a reference or , Error: Uncaught (in promise): Error: Cannot assign to a reference or variable form group in angular6 app. export class NestedFormComponent implements  @desmofab I have analyzed the issue of [(ngModel)] and at no time does a variable definition conflict with a model variable. I checked for something like you mentioned *ngIf =" element.outstanding as partialCollect "but I don't have anything like that either.

Comments
  • Is there any info why this is not supported?
  • Looked all over and couldn't find anything directly -- closest is angular.io/guide/…