Core.js:5760 ERROR TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2109

Robbie106gti · 2019-09-06T22:29:28Z

Minimal reproduction of the bug/regression with instructions:

I came across a compatibility issue with NgRx and Angular Version 9 Router

step 1: created a new CLI () project and add NgRx store, effects, entity, router-store, store, store-devtools
"@angular/cli": "^9.0.0-next.3"
"@angular/compiler-cli": "^9.0.0-next.5"

step 2: Make sure to use Ivy renderer
https://fireship.io/snippets/angular-upgrade-with-ivy/

step 3: create some routes

error in console when trying to navigate:
core.js:5760 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'tView' of object '[object Object]'
TypeError: Cannot assign to read only property 'tView' of object '[object Object]'

Expected behavior:

moving between routes

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

windows 10, node v10.14
"@angular/animations": "^9.0.0-next.5",
"@angular/common": "^9.0.0-next.5",
"@angular/compiler": "^9.0.0-next.5",
"@angular/core": "^9.0.0-next.5",
"@angular/forms": "^9.0.0-next.5",
"@angular/platform-browser": "^9.0.0-next.5",
"@angular/platform-browser-dynamic": "^9.0.0-next.5",
"@angular/platform-server": "^9.0.0-next.5",
"@angular/router": "^9.0.0-next.5",
"@ngrx/effects": "^8.3.0",
"@ngrx/entity": "^8.3.0",
"@ngrx/router-store": "^8.3.0",
"@ngrx/store": "^8.3.0",
"@ngrx/store-devtools": "^8.3.0",
"core-js": "^2.6.9",
"rxjs": "^6.3.3",
"tslib": "^1.9.0",
"zone.js": "^0.8.29"

Other information:

app.module.ts

StoreModule.forRoot(reducers, {
  metaReducers,
  runtimeChecks: { <-- delete this object and everythings fine...
    strictStateImmutability: true,  <-- this property seems to be interfering
    strictActionImmutability: true <-- this property seems to be interfering
  }
}),

Sorry if i did this wrong but this is my first time and just wanted to let you.

I would be willing to submit a PR to fix this issue

[x] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

The text was updated successfully, but these errors were encountered:

Robbie106gti · 2019-09-06T22:33:39Z

Wanted to add that having all 4 properties there also fixes the issue

    strictStateImmutability: true,
    strictActionImmutability: true,
    strictStateSerializability: true,
    strictActionSerializability: true,

timdeschryver · 2019-09-09T18:27:08Z

Hmmm, it's weird that if you have all the checks turned on it doesn't occur.
Do you got/can create a reproduction of this behavior?

If you wanna use the runtime checks, you probably also want to use the minimal router config - https://ngrx.io/guide/router-store/configuration#routerstateminimal

Robbie106gti · 2019-09-12T17:22:18Z

Here is my test repo
https://github.com/Robbie106gti/testrouter

So on some further testing I found that with a Customserializer the strictActionsSerializability cannot be set to true. all the others can be set to true.

Error: Detected unserializable action at "payload.event"
at throwIfUnserializable

but the main issue is that if you just start the setup process. so basic install and everything default. you run into this. and you get the cryptic message which doesn't tell much

Core.js:5760 ERROR TypeError

timdeschryver · 2019-09-13T12:46:49Z

You must use the minimal flag if you want the checks enabled, see https://ngrx.io/guide/router-store/configuration for more info.

tonivj5 · 2020-01-27T19:53:31Z

I have found this error too, updating to angular 9. Why was it closed? It was hard to relate to ngrx.

I have opened an issue at angular repo (angular/angular#34993) because the error pointed me to it at first instance. Once, I have found that @ngrx/router-store was the culprit I have found this issue 😭 (it has been a very long day...)

AndrewKushnir · 2020-02-06T01:12:44Z

Hi,

I'd like to followup on the issue @tonivj5 created in Angular Framework repo and provide more info after additional investigation. You can repro this issue using this repo: https://github.com/tonivj5/angular-issue-34993 (thanks @tonivj5).

The problem appears when the strictActionImmutability flag is set in the StoreModule.forRoot call, thus causing action payloads to become frozen recursively. Navigation event also contains a reference to a Component and as a result, all fields (including Ivy defs generated for that component, i,e. ɵcmp) become frozen. This is problematic for Ivy runtime, since it uses this def and expects it to be writable. As a result, when Ivy runtime tries to write to ɵcmp field (or one of the nested fields inside that data structure), an error is thrown saying that a given field is read-only. I'm attaching a screen shot with additional information and specific part of code where it happens, see below.

As a possible solution, fields with names starting with ɵ (used to annotate private Angular fields/API) might be excluded from "freeze" operation.

// cc @robwormald

Thank you.

garrappachc · 2020-02-11T13:23:34Z

+1 for this. In my project I needed to disable the strictActionImmutability check: tf2pickup-org/client@81a82c8
With this check disabled, everything works fine.
I have no idea why this issue is closed, it is obviously still affecting all projects that want to move to Angular 9.

brandonroberts · 2020-02-11T14:03:15Z

@garrappachc this issue has been fixed in master, and will go out with the next release soon. If we need to cut a bug fix for NgRx 8.x before then we will do that also.

ChrisMeeusen · 2020-02-20T19:10:04Z

+1 for this. In my project I needed to disable the strictActionImmutability check: tf2pickup-pl/client@81a82c8
With this check disabled, everything works fine.
I have no idea why this issue is closed, it is obviously still affecting all projects that want to move to Angular 9.

Updated to ng 9.0.2 today and this workaround got me running. Thanks!

pburkindine · 2020-02-22T22:45:00Z

@brandonroberts @AndrewKushnir I am still experiencing this error in A9. I have tried disabling both strictState and strictAction, and also upgrading to ngrx@9.0.0-beta.1

Our use case is this: various nx modules are passing a Type through state to the app.component, where the component is factoried into a MatSidenavContainer. (not routing-related but same error)

I also tried passing the factory instead and received a similar error.

This is a major problem for us; I don't want to have to revert after a long week getting us to A9. Please let me know what information I can provide.

[UPDATE]: I went around this for my use case with a small bus service.

tonivj5 · 2020-02-22T22:55:09Z

@pburkindine besides disabling strictAction and strictState try using minimal router state:

StoreRouterConnectingModule.forRoot({ routerState: RouterState.Minimal }),

timdeschryver · 2020-03-11T18:17:21Z

@dalu see #2404

kkuriata · 2020-03-17T11:51:23Z

Are you going to fix this issue? The app keeps crashing with newest Angular 9.0.6 and NgRx 9.0.0. Setting strictActionImmutability solves a problem, but this workaround is not a proper solution...

curiouscod3 · 2020-03-24T20:51:53Z

In my case, I had to set to false both to get rid of the error:

strictStateImmutability: false,
strictActionImmutability: false,

But, this wouldn't be alternative solution.

PostImpatica · 2020-05-19T13:16:28Z

Using the latest version of ngrx 9.1.2 I still got this error. I had to change the following line:

StoreRouterConnectingModule.forRoot({ serializer: DefaultRouterStateSerializer, stateKey: 'router' }),

to:

StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),

This was code from a Metronic theme written for Ang8 I was upgrading to Ang9.

SheppardX · 2020-06-05T07:13:50Z

I have version ngrx 9.1.2 and angular 9.1.9 and i get these error inside of a reducer and with

StoreModule.forRoot(appReducers, {
    runtimeChecks: {
      strictStateImmutability: false,
      strictActionImmutability: false,
      // disabled until https://github.com/ngrx/platform/issues/2109 is resolved
      /* strictActionImmutability: true, */
    },
  }),

its working again.

for me the problem occur on a "ToDo" list i click on the check and then i call an endpoint and set the new data in the reducer and update the store and on updating the store in the Success Action i get the readonly Property error

PolanZ · 2020-08-14T10:14:43Z

app.module.ts

import: [
  StoreModule.forRoot({}),
  TestModule,
  Test2Modle,
]

test.module.ts

StoreModule.forFeature('test', reducer)

test2.module.ts

StoreModule.forFeature('test2', reducer)

like that, how to disable strict!

manojmess · 2024-09-06T06:05:50Z

Wanted to add that having all 4 properties there also fixes the issue
    strictStateImmutability: true,
    strictActionImmutability: true,
    strictStateSerializability: true,
    strictActionSerializability: true,

                        strictStateImmutability: true,
			strictActionImmutability: true,
			strictStateSerializability: false,
			strictActionSerializability: true,
			
			this works fine for me

manojmess · 2024-09-06T06:06:32Z

Minimal reproduction of the bug/regression with instructions:

I came across a compatibility issue with NgRx and Angular Version 9 Router

step 1: created a new CLI () project and add NgRx store, effects, entity, router-store, store, store-devtools "@angular/cli": "^9.0.0-next.3" "@angular/compiler-cli": "^9.0.0-next.5"

step 2: Make sure to use Ivy renderer https://fireship.io/snippets/angular-upgrade-with-ivy/

step 3: create some routes

error in console when trying to navigate: core.js:5760 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'tView' of object '[object Object]' TypeError: Cannot assign to read only property 'tView' of object '[object Object]'

Expected behavior:

moving between routes

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

windows 10, node v10.14 "@angular/animations": "^9.0.0-next.5", "@angular/common": "^9.0.0-next.5", "@angular/compiler": "^9.0.0-next.5", "@angular/core": "^9.0.0-next.5", "@angular/forms": "^9.0.0-next.5", "@angular/platform-browser": "^9.0.0-next.5", "@angular/platform-browser-dynamic": "^9.0.0-next.5", "@angular/platform-server": "^9.0.0-next.5", "@angular/router": "^9.0.0-next.5", "@ngrx/effects": "^8.3.0", "@ngrx/entity": "^8.3.0", "@ngrx/router-store": "^8.3.0", "@ngrx/store": "^8.3.0", "@ngrx/store-devtools": "^8.3.0", "core-js": "^2.6.9", "rxjs": "^6.3.3", "tslib": "^1.9.0", "zone.js": "^0.8.29"

Other information:

app.module.ts
StoreModule.forRoot(reducers, {
  metaReducers,
  runtimeChecks: { <-- delete this object and everythings fine...
    strictStateImmutability: true,  <-- this property seems to be interfering
    strictActionImmutability: true <-- this property seems to be interfering
  }
}),
Sorry if i did this wrong but this is my first time and just wanted to let you.

I would be willing to submit a PR to fix this issue

[x] Yes (Assistance is provided if you need help submitting a pull request) [ ] No

strictStateImmutability: true,
			strictActionImmutability: true,
			strictStateSerializability: false,
			strictActionSerializability: true,

timdeschryver added Needs Reproduction Project: Store labels Sep 9, 2019

timdeschryver closed this as completed Sep 13, 2019

tonivj5 mentioned this issue Jan 27, 2020

TypeError: Cannot assign to read only property 'tView' of object '[object Object]' with Ivy angular/angular#34993

Closed

timdeschryver mentioned this issue Feb 6, 2020

feat(store): ignore ngrx actions for runtime checks #2351

Merged

3 tasks

loxy mentioned this issue Feb 20, 2020

Cannot assign to read only property 'currentPage' of object '[object Object]' salesforce/akita#371

Closed

pburkindine mentioned this issue Feb 22, 2020

reopen: TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2404

Closed

adrdilauro mentioned this issue May 5, 2020

When using RouterState.Full in router-store: "Cannot assign to read only property 'tView' of object '[object Object]'" #2510

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core.js:5760 ERROR TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2109

Core.js:5760 ERROR TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2109

Robbie106gti commented Sep 6, 2019

Robbie106gti commented Sep 6, 2019

timdeschryver commented Sep 9, 2019 •

edited

Loading

Robbie106gti commented Sep 12, 2019 •

edited

Loading

timdeschryver commented Sep 13, 2019

tonivj5 commented Jan 27, 2020

AndrewKushnir commented Feb 6, 2020

garrappachc commented Feb 11, 2020 •

edited

Loading

brandonroberts commented Feb 11, 2020

ChrisMeeusen commented Feb 20, 2020

pburkindine commented Feb 22, 2020 •

edited

Loading

tonivj5 commented Feb 22, 2020 •

edited

Loading

timdeschryver commented Mar 11, 2020

kkuriata commented Mar 17, 2020

curiouscod3 commented Mar 24, 2020

PostImpatica commented May 19, 2020

SheppardX commented Jun 5, 2020 •

edited

Loading

PolanZ commented Aug 14, 2020 •

edited

Loading

manojmess commented Sep 6, 2024

manojmess commented Sep 6, 2024

Minimal reproduction of the bug/regression with instructions:

Expected behavior:

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Other information:

I would be willing to submit a PR to fix this issue

Core.js:5760 ERROR TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2109

Core.js:5760 ERROR TypeError: Cannot assign to read only property 'tView' of object '[object Object]' #2109

Comments

Robbie106gti commented Sep 6, 2019

Minimal reproduction of the bug/regression with instructions:

Expected behavior:

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Other information:

I would be willing to submit a PR to fix this issue

Robbie106gti commented Sep 6, 2019

timdeschryver commented Sep 9, 2019 • edited Loading

Robbie106gti commented Sep 12, 2019 • edited Loading

timdeschryver commented Sep 13, 2019

tonivj5 commented Jan 27, 2020

AndrewKushnir commented Feb 6, 2020

garrappachc commented Feb 11, 2020 • edited Loading

brandonroberts commented Feb 11, 2020

ChrisMeeusen commented Feb 20, 2020

pburkindine commented Feb 22, 2020 • edited Loading

tonivj5 commented Feb 22, 2020 • edited Loading

timdeschryver commented Mar 11, 2020

kkuriata commented Mar 17, 2020

curiouscod3 commented Mar 24, 2020

PostImpatica commented May 19, 2020

SheppardX commented Jun 5, 2020 • edited Loading

PolanZ commented Aug 14, 2020 • edited Loading

manojmess commented Sep 6, 2024

manojmess commented Sep 6, 2024

Minimal reproduction of the bug/regression with instructions:

Expected behavior:

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Other information:

I would be willing to submit a PR to fix this issue

timdeschryver commented Sep 9, 2019 •

edited

Loading

Robbie106gti commented Sep 12, 2019 •

edited

Loading

garrappachc commented Feb 11, 2020 •

edited

Loading

pburkindine commented Feb 22, 2020 •

edited

Loading

tonivj5 commented Feb 22, 2020 •

edited

Loading

SheppardX commented Jun 5, 2020 •

edited

Loading

PolanZ commented Aug 14, 2020 •

edited

Loading