The value of "x" cannot be altered, yet it remains unrestricted

In my Angular 10 project with Typescript 3.9, I have the following class definition:

export class Document {
    constructor(
        public id: number,
        ...
        public tags: Tag[]
    ) {
        this.id = id;
        ...
        this.tags = tags;
    }
}

Whenever I attempt to modify the "tags" property in an existing object by reassigning or pushing new values like so:

document.tags = ...

I encounter the following error:

ERROR TypeError: "tags" is read-only

This behavior surprises me as I do not recall setting the property as

read-only

Has anyone experienced such an issue before? Could you shed some light on where this error might originate from?

I recently updated from Angular 7 to 10 and am puzzled by this new behavior, especially since the upgrade guide did not mention anything about it.

Even though it goes against best practices, I tried deactivating strict mode to see if that would fix the problem, but unfortunately, it did not work either.

Any insights or ideas on how to resolve this issue would be greatly appreciated.

angulartypescriptngrx

Answer №1

Below you will find the answer based on feedback.

Modifying ngrx stored objects may result in unexpected behavior, as the store protects the objects from being altered outside of the reducer.

Prior to Angular 8, many individuals also installed ngrx-store-freeze for added security. Starting with Angular 8, this feature is now integrated into the framework.

You can attempt to disable this protection by setting strictStateImmutability to false, but it is advised against due to potential unpredictable changes within the store.

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      runtimeChecks: {
        strictStateImmutability: false,
      },
    }),
  ],
})
export class AppModule {}

Answer №2

Avoid using the Document reserved word, and refer to the example provided below

class Example {
    constructor(
        public id: number,
        public tags: number[]
    ) {
        this.id = id;
        this.tags = tags;
    }
}

var x = new Example(1, [1,2])
x.id = 12
x.tags = [3,4]

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

Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...

cssangularangular-materialmat-card

What are the best ways to implement advanced data filtering in JavaScript?

Is there a way to improve the filtering of data in the ngx-datatable? Currently, I have a filter that only works for the "Name" column. How can I adjust it to filter data from other columns like "id" or "phone" as well? filt ...

javascriptangular

Is there a way to identify the accurate or incorrect array element and modify the component color accordingly?

Upon reviewing the question alternatives, I encountered a problem where clicking on one of the buttons correctly indicated whether it was the correct or incorrect answer by changing its color. However, the issue is that all buttons are being affected by th ...

reactjstypescriptstyled-componentstsxreact-tsx

Tips for simulating a service in Angular unit tests?

My current service subscription is making a promise: getTaskData = async() { line 1 let response = this.getTaskSV.getTaskData().toPromise(); line 2 this.loading = false; } I attempted the following approach: it('should load getTaskData', ...

javascriptangularjasminekarma-jasmineangular-unit-test

Angular 4 - The bindings are restricted from having assignments within them

Looking to include a CSS selector as an @Input in my component. To achieve this, I need to use the following syntax for passing a css selector: <mds-datetime-picker [inLine]="true" [targetSelector]='[data-name="target"]'></mds-datet ...

angularangular-components

The requested module cannot be located, were you referring to "js" instead?

I am currently developing a React application using webpack and typescript. I have integrated the dependency react-financial-charts into my project, and it is properly specified in the package.json. Inside the node_modules directory, there are two folders ...

javascriptreactjstypescriptwebpackwebpack-dev-server

Creating a custom data type using values from a plain object: A step-by-step guide

I recently came across an object that looks like this: const myObject = { 0: 'FIRST', 10: 'SECOND', 20: 'THIRD', } My goal is to define a type using the values from this object, similar to this: type AwesomeType = &apos ...

typescript

Retrieving a string value from a child route in Angular 2

Looking to set the header title from a child route view... In the parent component: @Component({ selector: 'parent-component', template: ` <header>{{headerTitle}}</header> <router-outlet></router-outlet ...

angularangular2-routing

Why the CoreModule in Angular is a must-have for practical development

Though I have gained ample experience in developing Angular-UIs, there is one concept that continues to elude me - the true value of incorporating a CoreModule. To clarify, I understand the purpose of a SharedModule; it houses reusable components (such as ...

angular

Error message: The provider is not being recognized by react-redux while using NextJS with RTK and

Struggling to integrate Redux RTK into my Next JS 13.4 app has been quite the challenge. No matter how many tutorials I follow, I keep encountering the same error in my provider.ts file. 'use client' import { store } from './store'; imp ...

reactjstypescriptreduxnext.js

A technique for deactivating reactive forms control within a nested formArray

Is there a way to selectively disable individual controls within the 'fields' group which is nested under this.form.get('groups').controls? I know how to disable an entire group by using this.form.get('groups').controls.disabl ...

angularformscontrols

Strategies for effectively choosing this specific entity from the repository

Is it possible to choose the right entity when crafting a repository method using typeorm? I'm facing an issue where I need to select the password property specifically from the Admin entity, however, the "this" keyword selects the Repository instead ...

typescriptormnestjstypeormbcrypt

Difficulty in utilizing gettext for parsing the .po translation file

When attempting to utilize ngx-translate with the .po loader, a warning is triggered during compile time: WARNING in ./node_modules/encoding/lib/iconv-loader.js 9:12-34 Critical dependency: the request of a dependency is an expression The warning specifi ...

angulartypescriptgettext

Can a custom subscribe() method be implemented for Angular 2's http service?

Trying my hand at angular2, I discovered the necessity of using the subscribe() method to fetch the results from a get or post method: this.http.post(path, item).subscribe( (response: Response)=> {console.log(response)}, (error: any)=>{console.l ...

angulartypescriptrxjsangular2-services

The Tanstack react-table feature is limited in its ability to output tsx from the cell

Currently conducting a test on Tanstack react-table library using React and TypeScript. It appears that I am encountering an issue with returning tsx/jsx from the cell function of ColumnDef: https://i.sstatic.net/d5X3y.png Is there something crucial that ...

reactjstypescriptreact-tabletanstack

Ensure Angular Reactive Forms do not include empty fields when submitting the form

Is there a way to retrieve only the fields with values entered by the user from a form and exclude empty fields in the resulting JSON object? Currently, the JSON object still includes empty quotation marks for empty inputs. Thank you! Current: { "user ...

javascriptangulartypescript

Angular 8: Implementing unique service instances for each instance of a shared component

In my current project, I am working on developing reusable d3-based dashboard components within Angular 8. The goal is to create components such as a barchart that can be easily packaged into a module and reused without requiring any modifications to the c ...

angulartypescript

What is the reason that {a: never} is not the same as never?

Is there a reason the code {a: never} cannot be simplified to just never? I believe this change would resolve the issues mentioned below. type A = {tag: 'A', value: number} type B = {tag: 'B', value: boolean} type N = {tag: never, valu ...

typescript

Dealing with request errors in Angular with RxJS - catchError() isn't as effective as expected

Update Alert: Problem Solved. Solution Provided Below In my service class, I have the following code snippet: public getListById(id:string): Observable<any[]> { return this.http.get<any[]>(`${BASE_URL.local}/${id}`).pipe( m ...

angulartypescriptrxjs

Exploring TypeScript implementation of Redux toolkit's store

I'm currently diving into the world of Redux in React + TypeScript by following the tutorials provided by Redux Toolkit. I am attempting to implement it in a sample application. My main struggle lies with typings related to the store and the mappStat ...

reactjstypescriptredux