Just updated my project to angular version 14.0.4
Within the html of a component, I have the following code:
<div class="file" *ngFor="let file of localDocumentData.files; index as i;">
<div class="card">
<img src={{file.thumbnail}} alt={{file.file_name}}>
<p>{{file.file_name}}</p>
<p>{{ file.file_size | bytes: false }}</p>
</div>
</div>
An error message is highlighting all object properties in the ngFor loop:
Object is of type 'unknown'.ngtsc(2571)
The files array is fetched from an API as part of an object. In the typescript file, the initialization of the file object is:
localDocumentData: any;
Despite no issues with building the project locally, the code continues to be highlighted.
Here is a screenshot of the highlighting
tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"useUnknownInCatchVariables": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}