Angular 2 Form Validation Error "Unhandled Promise rejection: Cannot assign to a reference or variable!"

You should either change your component variable, or your template #name variable. They are colliding:

export class AppComponent {
  prettyname: string; // here
  username: string;
  email: string;
  password: string;
}

Also change your String to string

<form>
  <div class="form-group">
    <label for="prettyName">Name</label>
    <input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
      <div [hidden]="!name.errors.required">
        Name is required
      </div>
      <div [hidden]="!name.errors.minlength">
        Name must be at least 4 characters long
      </div>
      <div [hidden]="!name.errors.maxlength">
        Name cannot be more than 20 characters long
      </div>
    </div>
  </div>
<button type="submit" class="btn btn-default">Submit</button>

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:string;

 }

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!

the solution is to change the name of one of your variables.

This error can popup with different causes. The one I found involves the use of ngFor. In particular, when binding ngModel to the iteration variable:

<div *ngFor="let item of items">
  <input [(ngModel)]="item" />
</div>

This kind of pattern will trigger the same cryptic error.