typeError: Cannot assign to read only property 'tView' of object '[object Object]' in angular 9.0.4

user_12939731 0
Viewed 10473

I've been using Angular 8, and recently updated to Angular 9. But when I run the project, it showd me this error in console:

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]' at getOrCreateTComponentView (core.js:7621) at createRootComponentView (core.js:18895) at

this is my package.json :

    "dependencies": {
    "@angular/animations": "^9.0.4",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "^9.0.4",
    "@angular/compiler": "^9.0.4",
    "@angular/core": "^9.0.4",
    "@angular/flex-layout": "^9.0.0-beta.28",
    "@angular/forms": "^9.0.4",
    "@angular/localize": "^9.0.4",
    "@angular/platform-browser": "^9.0.4",
    "@angular/platform-browser-dynamic": "^9.0.4",
    "@angular/platform-server": "^9.0.4",
    "@angular/router": "^9.0.4",
    "@aspnet/signalr": "^1.1.4",
    "@mat-datetimepicker/core": "^3.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
    "@ngrx/effects": "^8.0.1",
    "@ngrx/entity": "^8.0.1",
    "@ngrx/router-store": "^8.0.1",
    "@ngrx/store": "^8.0.1",
    "@ngrx/store-devtools": "^8.0.1",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@types/lodash": "^4.14.134",
    "angular-in-memory-web-api": "^0.8.0",
    "angular2-permission": "^0.1.3",
    "angular2-promise-buttons": "^4.0.0",
    "chart.js": "^2.8.0",
    "chartist": "^0.11.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.1.4",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.15.8",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "moment": "^2.24.0",
    "ng-inline-svg": "^8.4.1",
    "ng2-jalali-date-picker": "^2.2.7",
    "ngrx-store-freeze": "^0.2.4",
    "ngx-clipboard": "^12.1.0",
    "ngx-daterangepicker-material": "^2.1.3",
    "ngx-highlightjs": "^3.0.3",
    "ngx-material-file-input": "^1.1.1",
    "ngx-perfect-scrollbar": "^8.0.0",
    "ngx-permissions": "^7.0.2",
    "ngx-toastr": "^10.0.4",
    "object-path": "^0.11.4",
    "rxjs": "^6.5.2",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.10.2"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^0.900.4",
    "@angular/cli": "^9.0.4",
    "@angular/compiler-cli": "^9.0.4",
    "@angular/language-service": "^9.0.4",
    "@angular/material": "^9.1.0",
    "@angular/material-moment-adapter": "^9.1.0",
    "@ngrx/schematics": "^8.0.1",
    "@types/chartist": "^0.9.46",
    "@types/highlight.js": "^9.12.3",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.0.8",
    "@types/object-path": "^0.11.0",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "^3.6.4",
    "webpack-bundle-analyzer": "^3.3.2"
}
angular typescript javascript
3 Answers

This is a problem with NGRX Store and Ivy runtime which began in Angular 9

The problem is best explained here: https://github.com/ngrx/platform/issues/2109

The current workaround (16th March 2020) is to disable both

strictStateImmutability and strictActionImmutability

in your StoreModule metareducers

EffectsModule.forRoot([AuthEffects]), 
StoreModule.forRoot(reducers, 
    { metaReducers, 
        runtimeChecks: { 
            strictStateImmutability: false, 
            strictActionImmutability: false,
        } 
    }
),

Of course, this is a workaround and doesn't solve the problem. An issue is currently open with NGRX https://github.com/ngrx/platform/issues/2404

user_66301920

You are using ngrx with ngrx-store-freeze. Most likely you have an action or data model in your store which contains an angular component/template/directive. If you remove storeFreeze from your metaReducers, you will most likely not see the error anymore.

Nevertheless, you should find out what reducer is adding this component to the store, and find another way to handle this. It's definitely not a good idea to have such objects in your store anyways

user_31069200

I'm just sharing my 2 cents here as I found out that I made a mistake, which lead to kind of the same error. I was doing a mutation inside the selector of ngrx.

My error was:

Cannot assign to read only property '0' of object '[object Array]'

export const selectInspections = createSelector(selectInspectionsFeature, (state) =>
    state.inspections.sort((a, b) => (a.dateTimeUpdated > b.dateTimeUpdated ? -1 : 1))
);

Solved it by changing it like this:

export const selectInspections = createSelector(selectInspectionsFeature, 
(state) =>
    [...state.inspections].sort((a, b) => (a.dateTimeUpdated > b.dateTimeUpdated ? -1 : 1))
);

Now I am not modifying the state inside the selector.

user_29012070
Related