Search code examples
angularproductionangular14

Problem with ngFor index only in production mode

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

Solution

  • 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.