angular2 反应形式 |未捕获的类型错误：无法设置只有 getter 的 [object Object] 的属性堆栈答案

【问题标题】：angular2 reactive form | Uncaught TypeError: Cannot set property stack of [object Object] which has only a getterangular2 反应形式 |未捕获的类型错误：无法设置只有 getter 的 [object Object] 的属性堆栈
【发布时间】：2018-11-20 07:45:18
【问题描述】：

我正在尝试实现 angular2 响应式表单，但在加载组件时出现运行时错误

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

这个错误不是很清楚，所以我很难弄清楚发生了什么。我正在关注angular university article。我认为可能存在重大更改，因此我检查了 angular2 更改日志，但没有发现与我的反应式表单问题相关的任何内容。

任何帮助将不胜感激。我会继续四处寻找解决方案。

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

【问题讨论】：

我认为您不应该同时导入 ReactiveFormsModule 和 FormsModule。我尝试了您发布的代码，但没有发现错误。见this plunker。所以错误似乎来自你没有显示的代码。
该错误实际上是非常具有描述性的。你有一个对象，它只知道[object Object]（我们称它为obj），你试图设置一个属性stack（比如通过调用obj.stack = something，但你不允许这样做，因为stack属性是只读的（有一个getter，没有setter）。问题是赋值可能发生在任何地方（可能不是你的代码，但可能是你传递给库代码的东西引起的），所以你需要查看堆栈跟踪以查看它的来源。
@StevenLuke 两个模块都是必需的，错误来自有角度形式的指令。
@StevenLuke 该错误是非描述性的，与角度形式指令有关，以及错误发生的原因。
回复：第一个响应 - 对于两个 FormsModules - 打扰您链接的页面，我的测试表明您需要 ReactiveFormsModule，但不需要 FormsModule，至少对于您发布的代码而言。不确定是否还有其他需要。回复：第二个回应 - 我认为它归结为在哪里以及谁知道 - 错误准确描述了问题，根本原因可能来自其他地方。 Luis Cazacu 可能做对了。

标签： angular typescript

【解决方案1】：

我有时会遇到同样的错误。看起来像最新 zonejs/angular 中的错误。要获得真正的错误，请在引发此错误的堆栈上放置一个断点。您真正的错误将是它崩溃的函数的输入参数。

如果您需要更多详细信息https://github.com/angular/zone.js/issues/427

【讨论】：

这很有趣，我将不得不进一步研究。谢谢你告诉我断点，我会试试看。
那个帖子让我找到了问题的根源，我的模块中缺少一个提供者！

【解决方案2】：

关注 angular/zone.js 上的问题，comment 向我指出了解决真正错误的方向。

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

我只是缺少我创建的新服务的提供者。

【讨论】：

【解决方案3】：

在我的例子中，有一个 chrome 扩展引发了错误，在 zone.js 上的故障点设置断点揭示了有问题的扩展。然后我获取了扩展 ID 并在 chrome 中禁用了该扩展，一切都很好。

【讨论】：

【解决方案4】：

我在使用依赖不变性的ngxs 库时不小心将两个装饰器放在@ViewChild 上时出现此错误，如下所示：

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

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

【讨论】：