The stack property of [object Object] cannot be updated, as it only has a getter method

I can't figure out why I'm receiving this specific error in the Plunker below.

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

Access the Plunker here: https://plnkr.co/edit/IP1ssat2Gpu1Cra495u2?p=preview

The code causing the issue is shown below:

//our root app component
import {Component, NgModule, OnInit, Injectable} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

class MyModel {
  public name: string;
  public value: string;
}

@Injectable()
export class MyService {

  constructor(public http: Http) {

  }

  getData (request: MyModel):Promise<MyModel>{
    return this.http.get('https://run.plnkr.co/j2Cw0yaD5Dn7ENaR/mymodel.json')
                .toPromise()
                .then(response => {
                                return response as MyModel;
                        });
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App implements AfterViewInit {
  name:string;

  constructor(myService : MyService) {
    this.name = 'Angular2'
  }

  ngAfterViewInit(){

    let myModelObj : MyModel = new MyModel();
    console.log(this.myService);
    this.myService.getData(myModelObj)
      .then(response => {
        console.log('GET Request success')
        console.log(response);
      });

  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  providers : [MyService],
  bootstrap: [ App ]
})
export class AppModule {}

Update

I have identified that the error lies within this section:

this.myService.getData(myModelObj)
          .then(response => {
            console.log('GET Request success')
            console.log(response);
          });

If I comment out these four lines, everything works fine. Can someone provide assistance on this matter?

Answer №1

To utilize the functionality of myService in App, it is necessary to either assign it to a property within the constructor or specify its visibility (a TypeScript feature):

constructor(private myService : MyService) {
    this.name = 'Angular2'
}

In simpler terms, this.myService will be undefined if you attempt to call

this.myService.getData(myModelObj)
.

Check out your updated demonstration here: https://plnkr.co/edit/OyYUDSfD0Q8dDuwEAr1l

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered: Upon executing 'ng add @angular/fire', an error was detected in the node_modules/firebase/compat/index.d.ts file while attempting to launch the Angular application

Recently, I decided to integrate Firebase into my project, but encountered a persistent error after installing the firebase module 'ng add @angular/fire' and running it with 'ng serve': Error: node_modules/firebase/compat/index.d.ts:770 ...

Generate a new array of objects by cloning an existing array of objects with placeholder values

I am looking to transform an array of objects into another array of objects in order to generate a graph. Below is the array I am using to determine the position of each object within the new object. let uniqueSkills = ['Using', 'Analyzing ...

Ways to set a default value for a function that returns an unknown type in TypeScript

In my code, I have a customizedHook that returns a value of type typeXYZ || unknown. However, when I try to destructure the returned value, I encounter an error TS2339: Property 'xyz' does not exist on type 'unknown', even though the da ...

Go to the child router using the specified outlet

I am attempting to display the expanded item within a grid of components that are being rendered inside a named outlet. In order to achieve this, I have added children to my named outlet path. Currently using Angular 7, I have followed various guides from ...

The form data consistently replaces existing values with each new entry added

I am struggling to persist all the form values that are entered in my component using local storage. Despite setting and pushing the form values, I noticed that each time I push the data, it replaces the previously entered form data. My goal is to retain a ...

Having trouble assigning an initial value to ngx-bootstrap typeahead

Hello there, I am currently using Angular version 16 with ngx-bootstrap version 11.0.2. I am facing an issue where I cannot set a default value for a control. When a user selects data from a suggestive search and it gets saved in the database, I want that ...

Typescript enhances React Native's Pressable component with a pressed property

I'm currently diving into the world of typescript with React, and I've encountered an issue where I can't utilize the pressed prop from Pressable in a React Native app while using typescript. To work around this, I am leveraging styled comp ...

Is it possible for Angular version 15 to function without needing to migrate to material

Can anyone clarify whether material migration is necessary when upgrading from Angular v14 to v15? The Angular upgrade guide mentions that old(v14) material modules can still be used by utilizing legacy modules, so is it mandatory to migrate? "In the new ...

What causes a function loss when using the spread operator on window.localStorage?

I am attempting to enhance the window.localStorage object by adding custom methods and returning an object in the form of EnhancedStorageType, which includes extra members. Prior to using the spread operator, the storage.clear method is clearly defined... ...

What is the mechanism behind making a Promise appear synchronous when using a Proxy in JavaScript?

const handler: ProxyHandler<any> = { get: (target: Promise<any>, prop: string, receiver: any) => { return target.then((o) => { return o[prop].apply(o); }); }, }; return new Proxy(obj, handler) ...

The Angular framework always initializes the list items in CDK drop List starting from the initial index

Currently, I am working with the cdk Drag drop feature <div class="example-container" cdkDropListGroup> To properly understand and describe data, it is crucial to be aware of the level of variability. This can be determined by analyzing the ...

What is the best way to accomplish this using typescript/adonis?

While exploring some code examples on Bitbucket, I came across a sample that demonstrated how to paginate query results using JavaScript. However, as I attempted to apply it in my project, I encountered difficulties in declaring the types required for the ...

Generate a new Angular2 component on the fly based on information retrieved from an API request

Within my application, I have implemented a dropdown menu featuring 'Statements' that users can select. Upon the selection of a specific statement, an API call is triggered to fetch data on how this information should be displayed, referred to as ...

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

Ensure the information remains secure within the Ionic provider

In my Ionic 3 project, I am sending an API request and displaying the response on a page called Home.ts by using a Provider. I want to ensure that the data remains in the provider after the initial request so that all pages utilizing this Provider can acce ...

Ensure the CSS class stays on Quill clipboard.dangerouslyPasteHTML

One of the challenges I face with using the Quill Text Editor is that when I use the method clipboard.dangerouslyPasteHTML to paste HTML into the editor, it does not maintain custom CSS classes. For example: let content= '<p class="perso-clas ...

The content security policy is preventing a connection to the signalr hub

Currently, I am developing an application using electron that incorporates React and Typescript. One of the features I am integrating is a SignalR hub for chat functionality. However, when attempting to connect to my SignalR server, I encounter the followi ...

Passport.js consistently returns an unauthorized status for every request, even when a valid token is provided, or it author

I am facing issues with my Passport.js functions not authenticating users properly. When I use the current form, it always returns "unauthorized" for all requests: import passport from 'passport' import passportJWT from 'passport-jwt' ...

"Utilizing Angular's Reactive Forms to Set a Default Object in

I'm having an issue with setting the default value for a select box in my reactive form. The select options come from an array of objects, but no matter what I try, the default value just won't stick. This is how my form looks like: <form [f ...

What could be causing the OnInit lifecycle hook to fail to execute properly?

I'm having trouble with this code. Every time I run it, the console throws a type error saying it can't read property sort. Does anyone have any ideas on how to fix this? import { Component, OnInit, Input } from '@angular/core'; impor ...