A guide on troubleshooting Angular 2 using webpack

After encountering the following error:

EXCEPTION: Uncaught (in promise): TypeError: Cannot set property stack of [object Object] which has only a getter TypeError: Cannot set property stack of [object Object] which has only a getter

I am faced with an extensive stack trace and I’m struggling to identify which TypeScript file is causing the issue with its read-only property. Is there a method available that can pinpoint the problematic property it’s trying to set, which turns out to have only a getter?

A potential solution could involve gradually removing sections of code until the error disappears. This approach would help narrow down the scope of the issue within the code and provide insight into what might be causing it. However, this quick fix may not prove sustainable in the long term; if the code breaks again later on, I would be at a loss as to what caused it, unless I delve into version histories.

Is there a tool or utility that offers assistance in handling this type of situation efficiently?


Error: Uncaught (in promise): TypeError: Cannot set property stack of [object Object] which has only a getter
TypeError: Cannot set property stack of [object Object] which has only a getter
    // The rest of the stack trace goes here...

Answer №2

The issue at hand is a result of a library or module that is missing. Within one of your templates, you are utilizing a directive that the application does not recognize (hasn't been loaded);

Here's how I tackled this.

  • Examine the error stack in your browser

  • Then look for methods such as CompiledTemplate.proxyViewClass and the Locals ==> This will provide you with a helpful error message that points you directly to the absent directive

Note: This error is unrelated to "zone.js"; It's possible that altering the version of "zone.js" may change the error message.

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

I am looking to attach a Bootstrap 4 class to the form input field

I needed to apply the "is-invalid" bootstrap4 class when my Angular form field was invalid and touched. I attempted to achieve this with: <input type="text" #name class="form-control" [class.is-invalid]="name.invalid && name.touched" name="Name ...

Expanding rows in Angular 10 causes fluctuations in the width of Bootstrap tables?

My table has expandable rows when clicked. Here is the current setup: <table class="table table-striped" > <thead> <tr> <th scope="col">a</th> <th scope="col">b</th> ...

The code is looking for an assignment or function call, but found an expression instead: no-unused-expressions

Why am I encountering an ESLint error when using Ternary with 2 statements here? ESLint Error: no-unused-expressions res?.isSuccessful ? (this.toastService.showToast(res.message, 'success'), this.queueDataService.addMember(attendee)) : ...

The DatePicker in Angular2 and Typescript is unable to execute the property 'toggle' because it is undefined

I've encountered an issue with the calendar icon for angular2's datepicker. Whenever I try to click on it, I keep getting this error: TypeError: Cannot read property 'toggle' of undefined at Object.eval [as handleEvent] (Admiss ...

Utilizing a TypeScript definition file (.d.ts) for typings in JavaScript code does not provide alerts for errors regarding primitive types

In my JavaScript component, I have a simple exporting statement: ./component/index.js : export const t = 'string value'; This component also has a TypeScript definition file: ./component/index.d.ts : export const t: number; A very basic Typ ...

Webpack is having trouble resolving the Vue package within the node_modules directory, specifically with vue-template-compiler

I have a basic Typescript project that includes the following code: import { parseComponent, compile as compileTemplate, ASTElement, } from "vue-template-compiler"; ... To compile this code, I use tsc with the following configuration: &quo ...

Implement a global interceptor at the module level in NestJS using the Axios HttpModule

Is there a way to globally add an interceptor for logging outgoing requests in Angular? I know I can add it per instance of HttpService like this: this.httpService.axiosRef.interceptors.request.use((config) => ...) But I'm looking to add it once a ...

Types with conditions but no common parameter

I am looking to define my props as either type A or B. For instance export default function App() { type Checkbox = { type: "checkbox"; checked: boolean; }; type Dropdown = { type: "dropdown"; options: Array<an ...

TypeScript and Express create a powerful array combination capability within the type system

After defining the EventType as either "TYPE A" or "TYPE B", I am looking to create a type for an array that can only contain one or both of these event types. Simply typing it as an EventType[] allows duplicates, which is not ideal. type Test = EventType ...

Including the file path to an image in a CSS module within a React component from the public directory

I'm currently facing a challenge with adding an image as a background, especially since the image is located in a public folder structure like this: -public -images -image.png -src -assets -components -index.tsx -index.module.css (I want to use the ...

Acquire data through Reactive Form input

Struggling to populate my entity data in a reactive form. Data retrieval is successful, but unsure about the ideal method and timing for filling out the form with these values. Here's the structure of my form: import { Component, OnInit, Input } fr ...

Mapping an array in Typescript using Angular to instantiate a class

I have received data from a web API that resembles the structure below. I am looking for guidance on how to properly map the product array into individual Products. My main objective is to convert the eating_time values into JavaScript datetime format. Cu ...

limitation on pairings of two generic types

How can I specify in TypeScript that "You can pass in any two objects, as long as their combination satisfies type X"? For example, consider the following function: function myFunction(options: {x: number, y: string}){ } Now, let's say we have anot ...

Using JSDoc to Include TypeScript Definitions

I've been attempting to utilize the ts-xor package, which provides a TypeScript definition: export declare type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; This is how I'm imp ...

Ways to indicate certain columns as highlighted and others as not chosen in the PrimeNg Multiselect module

Looking to customize the display of columns in Primeng Multiselect: how can I show only selected columns that have their 'display' property set to true? this.columns = [ { field: 'A', label: 'A', display: true }, { field: &ap ...

Conditional void parameter type in Typescript

Attempting to create a custom Error class that can handle different data based on the error code seemed like a complex task for TypeScript. However, surprisingly, it was successful: const enum ERROR_CODES { E_AUTHORIZATION = 'Authorization error&ap ...

An issue occurred while compiling the 'ToastContainer' template. Decorators do not support function calls, and the call to 'trigger' caused an error

When I run ng serve and ng build, there are no errors. However, when I run ng build --prod, I encounter this error. Can anyone help me fix it? ERROR in Error during template compile of 'ToastContainer' Function calls are not supported in decor ...

Component in Angular not reloading when routerLink is clicked

When attempting to trigger a click event, I am unable to reload the component. The code snippet that I have tried is as follows: (dealCode,periodName) => { let url:any='/valuation;dealcode=J9PPR;fundPeriod=2019Q3;useDefault=true'; t ...

When requesting URLs on the server via Http, they must be in absolute form

Recently, I developed an Angular Universal application using Angular2 where I made a request to the /category service. this.hsService.getCategories(AppConstants.BASE_URL_GET_CATGORIES).subscribe( resp => { if (resp !== null) { console.log(& ...

The argument provided, labeled as 'Element', cannot be matched with the parameter labeled as 'HTMLElement'

const labelEl: HTMLElement = document.createElement('label') const isElOfNeededType = (el: HTMLElement): boolean => ["INPUT", "TEXTAREA"].includes(el.tagName); let result if (isElOfNeededType(labelEl.nextElementSibling)) { result = t ...