javascript - typeError: Cannot assign to read only property 'tView' of object '[object Object]'

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

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

Share Improve this question edited Jan 1, 2022 at 21:31 Zoe - Save the data dump 28.2k22 gold badges128 silver badges159 bronze badges asked Feb 29, 2020 at 12:05 kianoush dortaj 811 gold badge1 silver badge6 bronze badges

Github issue - github.com/ngrx/platform/issues/2404 – Andrew Allen Commented Mar 6, 2020 at 15:37

Add a comment |

3 Answers 3

Sorted by: Reset to default 16

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

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

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - typeError: Cannot assign to read only property 'tView' of object '[object Object]'

3 Answers 3

与本文相关的文章

评论列表(0)