CODEWITHSUNDEEP
angulartypescript
oxenfree
oxenfree

Reputation: 516

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

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

Upvotes: 5

Views: 8064

Answers (4)

rivanov
rivanov

Reputation: 1274

I got this error when I accidentally put two decorators on a @ViewChild, while using the ngxs library, which relies on immutability, like so:

  import { Select } from '@ngxs/store';

  // @Select(AppLoginAPIState.getAuthenticatedUser) // uncomment to produce the error
  @ViewChild('redirectCheckModal')
  redirectCheckModal: ModalComponent;

Upvotes: 0

Josh Schoen
Josh Schoen

Reputation: 1

In my case there was a chrome extension that was throwing the error, setting a break point at the point of failure on zone.js revealed the offending extension. I then grabbed the extension ID and disabled that extension in chrome and all was good.

Upvotes: 0

oxenfree
oxenfree

Reputation: 516

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.

Upvotes: 1

Luis Cazacu
Luis Cazacu

Reputation: 226

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

Upvotes: 6

Related Questions