Cannot assign to read only property 'x' of object '[object Object]'

Question

After upgrading my project to Angular 12/TypeScript 4.3.5, I am getting the error above. Here is my code:

for (const metric of metrics) {
    if (!metric.focalThemeSubArea) {
        metric.focalThemeSubArea = metric.focalTheme;
    }
}

My Metric class is defined as follows:

export class ScaMetricGraphType {
    public focalTheme: string;
    public focalThemeSubArea: string;
    public isActive: boolean;
    public name: string;
}

I don't see anything that's read-only about focalThemeSubArea. While it's true that I declared metric as const in the loop, that shouldn't mean that its members become read-only. Unless something changed about TypeScript that I'm unaware of.

This error can occur if you import the `metrics` array from a JSON file directly. Where do you get the `metrics` from? — Octavian Mărculescu, Oct 04 '21 at 10:56
It's coming from a service, so it is JSON, although not from a "file" per se. — FunkMonkey33, Oct 04 '21 at 10:59

score -1 · Accepted Answer · answered Oct 06 '21 at 17:44

Sorry, community. This was an issue with my development environment. I was upgrading from 7 to 12, and trying to keep as much consistent as possible in my angular.json and tsconfig.json.

I'm still not sure what exactly caused this, so this really isn't an answer. But I did create a new Angular 12 app with the default settings, and ran my code there, where it worked perfectly.

Thanks for your help with this.

Cannot assign to read only property 'x' of object '[object Object]'

1 Answers1