angular2 reactive form | Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

Question

I'm trying to implement an angular2 reactive form, but I get a run time error when loading the component

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

This error isn't exactly clear, so I'm having a hard time figuring out what's going on. I'm following along with an angular university article. I thought maybe there were breaking changes, so I checked the angular2 changelog but didn't find anything related to my issue with reactive forms.

Any help would be appreciated here. I'm going to keep poking around for a solution.

addevent.component.ts

@Component({
  selector: 'addevent',
  templateUrl: 'addevent.component.html',
  styleUrls: ['addevent.scss']
})
export class AddEvent {

  // vars
  private _addEventForm:FormGroup;
  private _eventTitle:FormControl;
  private _eventDescription:FormControl;

  constructor(private _addEventService:AddEventService,
              private _formBuilder:FormBuilder) {
    // init vars
    this. _eventTitle = new FormControl('', Validators.required);
    this._eventDescription = new FormControl('', Validators.required);
    this._addEventForm = _formBuilder.group({
      'eventTitle': this._eventTitle,
      'eventDescription': this._eventDescription
    });
  }

  private addEvent():void {
    console.log(this._addEventForm);
    //this._addEventService.addEvent();
  }

}

addevent.component.html

<div class="h3 content-title">Add Event</div>

<form [formGroup]="_addEventForm" (ngSubmit)="addEvent()">
  <p>
    <label>Title</label>
    <input type="text" formControlName="eventTitle">
  </p>
  <p>
    <label>Description</label>
    <input type="text" formControlName="eventDescription">
  </p>
  <p>
    <button type="submit" [disabled]="_addEventForm.invalid">Submit</button>
  </p>
</form>

dashboard.module.ts

@NgModule({
  declarations: [Dashboard, Navbar, Sidebar, Home, Profile, Events, AddEvent],
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule],
  providers: [ContentSwap, SidebarActivity, AuthService, FirebaseAuthService]
})
export class DashboardModule {}

Answer 1

I get the same error sometimes. Looks like a bug in the latest zonejs/angular. To get your real error put a breakpoint on the stack from where this error is thrown. Your real error will be an input argument to the function it crashes.

If you need more details https://github.com/angular/zone.js/issues/427

Answer 2

Following the thread for an issue on angular/zone.js, a comment pointed me in the direction of getting down to the real error.

uncaught TypeError: Cannot create property 'configurable' on string 'Error: No provider for AddEventService!

I was just missing a provider for a new service I created.