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

Question

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?

Answer 1

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