CODEWITHSUNDEEP
angulartypescriptngrx
Jehob
Jehob

Reputation: 101

"x" is read-only, but it isn't

I have a Angular 10 (Typescript 3.9) project with the following class:

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

If I try to change tags (reassign or push) with

document.tags = ...

for example in an existing object, I get:

ERROR TypeError: "tags" is read-only

If I had a

read-only

I would expect this behavior. Do you have any idea where this error comes from?

I recently upgraded from Angular 7 to 10, before that everything worked fine, but the upgrade instructions mentioned nothing about such behavior.

Deactivating strict-mode (even though considered bad practice) didn't work.

Do you have any idea?

Upvotes: 1

Views: 517

Answers (2)

MoxxiManagarm
MoxxiManagarm

Reputation: 9134

Here is the answer as per comments.

Changing ngrx stored objects can lead to such behavior, since the store guards the objects to be altered from outside the reducer.

Pre Angular 8 most people additionally installed ngrx-store-freeze to retrieve the safety. With Angular 8 the feature became built in.

You could try to disable it by setting strictStateImmutability to false, but it is not recommended to do so, because the store can now include unpredictable changes.

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

Upvotes: 1

Derviş Kayımbaşıoğlu
Derviş Kayımbaşıoğlu

Reputation: 30663

First of all Document is reserved, try not to use it. and check the example below

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

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

Upvotes: 0

Related Questions