0

I have a relatively old project of mine, originally made in Angular 7, I recently got motivated, updated it to 13, and I was able to make everything work... At least while developing. (I had actually upgraded it to Angular 10 about half a year ago, but I only developed on it, never really tried to compile at that time)

So, with ng serve, the project runs fine and everything works well, so I now needed to compile it to push it all to my server together with the API, and after some fixes here and there, it compiled, and I was able to see the screen and everything! However, I'm getting this console error:

ERROR TypeError: "count_categories" is read-only
    Dictionary dictionary.ts:8
    set dictionaries.service.ts:34
    getAll dictionaries.service.ts:84
    (..)

Well, it also shows the line and everything but... I have no idea how could I fix it? I also found out that this problem seems to be attributed to "Strict Mode", I tried to disable it in many ways, but nothing worked (hence, I have here).

Here is what is happening, a reminder, this code runs fine on serve, but crashes on AOT:

export class Dictionary {
  public constructor(init?: any) {
    Object.assign(this, init); // The error is here
  }
  id: number;
  name: string;
  language: string;
  dateCreated: Date;
  dateRevision: Date;
  @Optional() changes: boolean;
  @Optional() novel: Novel[];
  // tslint:disable-next-line: variable-name
  @Optional() count_categories: [{count: number}];

  countCategories(): number {
    if (this.count_categories[0]) {
      return this.count_categories[0].count;
    }
    return 0;
  }
}

https://github.com/ssj4maiko/mtltools/blob/master/resources/frontend/src/app/_models/dictionary.ts

The value of init comes from an API:

    {
        "id": 1,
        "name": "asd",
        "language": "English",
        "dateCreated": "2019-05-28T01:29:13.000000Z",
        "dateRevision": "2022-01-14T17:56:34.000000Z",
        "count_categories": [
            {
                "idDictionary": 1,
                "count": 14
            }
        ]
    }

So, clearly the error comes from Object.assign assigning a value into the optional "count_categories" array of objects, and it works during serving, but on AOT, I get the "read-only" thing error in every screen this API is called... And it should not be read-only, since I do modify this value on the fly.

So, I tried disabling Strict Mode, but didn't work (Maybe I did it wrong), and the variable is not supposed to be on read-only mode.

So I ask for a solution, be it a way to really disable this checking? Or maybe a way to assign the values in a different manner to avoid the problem? Or maybe something that I couldn't think of?

Angular is not my specialty, and it had been a long time since I last saw it, but I do program for life, what I mean is that I'm not aware of all the tricks available here, but I should be able to understand whatever is needed.

ssj4maiko
  • 41
  • 5

1 Answers1

0

Well, so while continuing, although I know that it was fully working when I was using serve, and while I was trying to compile, when I trying serving it again, the problem was replicated, meaning, it also stopped working that way.

At first I thought it could be related to having to assign values onto an object, so I changed the API to give me straight away the sole number I needed (count), and it was still bad. The moment I removed @Optional it worked though...

I went to check and, for my needs, I just confirmed that all calls for this should return the value, meaning, the originally optional value is kinda always there, although this shouldn't be proper, it works on practice. I would still like to learn of a better way to understand better these and a way to deal with such "limitations".

Well, in regards to the parts I thought it would increase and decrease, it seems I forgot to add that on this upgrade, so it's also not affecting me right now, but I already have something in mind to make things a bit more dynamic at least.

ssj4maiko
  • 41
  • 5