Невозможно присвоить ссылку или переменную! Угловой 6

Question

Я создаю форму проверки с использованием Ionic 3 и Angular 6, но столкнулся с проблемой. Когда я запускаю свое приложение, я получаю эти сообщения об ошибках

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)

и я считаю, что причина появления этих сообщений об ошибках заключается в том, что я добавляю эту строку кода в мой тег "ion-input"

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

Я дважды проверяю свою работу, чтобы убедиться, что она соответствует учебнику, и я до сих пор не могу найти, где формируется ошибка. Может кто-нибудь, пожалуйста, протянуть руку? Вот мой код

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

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)
  }

}

Answer 1

Вы использовали два ngModel, чтобы указать на другое variables. Удалите тот, который не требуется.

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

Answer 2

Видимо, вы получаете это, когда пытаетесь установить переменную контекста в шаблоне также

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

Компилируется и работает кроме ng build --prod. Мне понадобилось время, чтобы выследить это сегодня после большого рефакторинга. Должен помнить, чтобы строить (прод) часто!

Answer 3

Кажется, что ваша переменная компонента и переменная шаблона сталкиваются:

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

Файл TS

email: string;
password : string; 

Вы должны изменить имя одного, например, изменить его на Email