0

I have an Angular 14 application which works perfectly in development mode. Everything goes well during the build to production. And when I go to my page in production, I have this error in the console:

Cannot read properties of undefined (reading 'absiccValues')

I use a custom pipe called 'bafBackgroundColor' in the following example and the error appears in the arguments of this pipe (line 3)

<ng-container *ngFor="let item of col.field; let i = index">
    <input type="number" step="any" [(ngModel)]="piece[item.field_name]" 
        [style.backgroundColor]="piece[item.field_name] | bafBackgroundColor:item.field_name:scp_list[i]['absiccValues']">
    {{scp_list[i]['absiccValues'].max}}
    {{i}}
</ng-container>

The error tells me that it cannot find "abcissValues" in the index "i" of my scp_list array, yet when I display this same value outside the input, with "{{scp_list[i] ['absiccValues'].max}}" (line 4 of the example above), it works

ZaRToP
  • 31
  • 5

1 Answers1

1

Not enough code to be specific, so just do this

bafBackgroundColor:item.field_name:scp_list[i]?.absiccValues"

That's probably because your data does not get loaded in time or some silimar issue. Your API in local mode is faster than in prod mode, so you don't see the issue, but it's there.

You can also protect your tag with an *ngIf statement to avoid that if you prefer.

MGX
  • 2,534
  • 2
  • 14
  • It works perfectly, thank you. I think as you said, in production the data doesn't load fast enough unlike in development mode, so my scp_list array is potentially empty when displaying the page, and so it causes the error with the index because there is no item inside the array. Thank a lot ! – ZaRToP Oct 17 '22 at 11:06