TS2740: Type '{}' is missing the following properties from type 'ExpenseModel[]': length, pop,...

[ERROR] TS2740: Type '{}' is missing the following properties from type 'ExpenseModel[]': length, pop, push, concat, and 26 more. [plugin angular-compiler]

src/app/modules/expenses/pages/expenses-by-date/expenses-by-date.component.html:7:7:
7 │ [expensesByDate]="expenses"
╵ ~~~~~~~~~~~~~~

Error occurs in the template of component ExpensesByDatePageComponent.

src/app/modules/expenses/pages/expenses-by-date/expenses-by-date.component.ts:27:15:
27 │ templateUrl: './expenses-by-date.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

expenses-by-date.component.html
​

@if (expensesChanged$ | async; as expenses) {
<ng-container>
<app-expenses-by-date
[expensesByDate]="expenses"
(expenseDetailsChange)="updateExpense($event)"
></app-expenses-by-date>
</ng-container>
}

expenses-by-date.component.ts
​

expensesChanged$: Observable<ExpenseModel[]> = [];

ngOnInit(): void {
this.expensesChanged$ = this.expenseDataService.expensesChanged$.pipe(
startWith([]),
map((res: ExpenseModel[]) => filter(res, (f) => f.date === Number(date)))
);
}

expense-data.service.ts
​

constructor() {
this.expensesSubject = new BehaviorSubject<ExpenseModel[]>([]);
this.expensesChanged$ = this.expensesSubject.asObservable();
}

package.json
​

{
"name": "",
"version": "1.5.24",
"author": "",
"homepage": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/cdk": "20.1.5",
"@angular/common": "20.1.6",
"@angular/core": "20.1.6",
"@angular/forms": "20.1.6",
"@angular/platform-browser": "20.1.6",
"@angular/platform-browser-dynamic": "20.1.6",
"@angular/router": "20.1.6",
"@capacitor-community/sqlite": "5.0.0",
"@capacitor-firebase/authentication": "5.1.0",
"@capacitor/android": "5.2.3",
"@capacitor/app": "5.0.0",
"@capacitor/camera": "5.0.0",
"@capacitor/core": "5.2.3",
"@capacitor/filesystem": "5.2.1",
"@capacitor/haptics": "5.0.0",
"@capacitor/ios": "5.2.3",
"@capacitor/keyboard": "5.0.0",
"@capacitor/network": "5.0.0",
"@capacitor/preferences": "5.0.0",
"@capacitor/splash-screen": "5.0.0",
"@capacitor/status-bar": "5.0.0",
"@ionic/angular": "8.7.2",
"@sentry/angular": "^9.38.0",
"@sentry/capacitor": "2.1.0",
"@types/lodash": "4.14.178",
"dayjs": "1.10.7",
"firebase": "9.6.10",
"guid-typescript": "1.0.9",
"lodash": "4.17.21",
"native-run": "^2.0.1",
"rxjs": "7.5.0",
"tslib": "2.8.1",
"zone.js": "0.15.1"
},
"devDependencies": {
"@angular-eslint/builder": "20.1.1",
"@angular-eslint/eslint-plugin": "20.1.1",
"@angular-eslint/eslint-plugin-template": "20.1.1",
"@angular-eslint/template-parser": "20.1.1",
"@angular/build": "^20.1.5",
"@angular/cli": "20.1.5",
"@angular/compiler": "20.1.6",
"@angular/compiler-cli": "20.1.6",
"@angular/language-service": "20.1.6",
"@capacitor/cli": "5.0.0",
"@ionic/angular-toolkit": "^11.0.1",
"@sentry/cli": "2.20.7",
"@types/node": "12.11.1",
"@typescript-eslint/eslint-plugin": "8.39.1",
"@typescript-eslint/parser": "8.39.1",
"eslint": "9.33.0",
"eslint-plugin-import": "2.32.0",
"eslint-plugin-jsdoc": "54.0.0",
"eslint-plugin-prefer-arrow": "1.2.3",
"prettier": "2.5.1",
"ts-node": "8.3.0",
"typescript": "5.8.3"
},
"description": ""
}


It worked with Angular 16.But after upgrading to the latest Angular, it gives the above error. If I subscribed within expenses-by-date.component.ts file without async in the HTML file, then it works. How can I solve this with async on html file, hence I have a lot of such components on the app.

Continue reading...