ERROR TypeError: Cannot read properties of undefined (reading 'quantity') - Angular 12 - undefined

Question

I have been facing this problem for quite some time now. When I try to add an item to my cart I get this error : ERROR TypeError: Cannot read properties of undefined (reading 'quantity').
Here is my cart service:
import { Injectable } from '#angular/core';
import { environment } from 'src/environments/environment';
import { Cart } from '../models/cart';
import { Item } from '../models/item';
import {Product} from '../models/product';
import {Subject} from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class CartService {
cart:Cart=new Cart();
tva=environment.tva/100;
cart$=new Subject<Cart>();
constructor() { }
emitCart(){
this.cart$.next(this.cart)
}
addToCart(product:Product){
const item=this.cart.items.find(item=>item.product._id === product._id);
if(item){
item.quantity++;
}else{
const item=new Item();
item.product=product;
item.quantity=1;
this.cart.items.push(item);
}
this.updateCart();
}
updateCart(){
this.cart.items.forEach(item=>{
this.cart.resume.quantity+=item.quantity;
this.cart.resume.costHT+=item.quantity*item.product.price;
this.cart.resume.costTaxe+=this.cart.resume.costHT*this.tva;
this.cart.resume.costTTC+=this.cart.resume.costHT*(1+this.tva);
})
this.emitCart();
}
removeOne(product:Product){
}
removeMany(product:Product){
}
}
This is my header where a number should be added next to the shopping bag icon when I click on the add to cart icon :
This is my header component logic :
import { Component, OnInit } from '#angular/core';
import {AuthService} from "../../../services/auth.service";
import {CartService} from '../../../services/cart.service';
import {Cart} from '../../../models/cart';
#Component({
selector: 'node-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isAuth;
resume:{quantity:number,costHT:number, costTaxe,costTTC:number};
constructor(private authService:AuthService,private cartService:CartService) { }
ngOnInit(): void {
this.cartService.cart$.subscribe(
(cart:Cart)=>{
this.resume=cart.resume;
console.log(cart.resume);
},
(err)=>{
console.log(err.message);
}
)
this.authService.isAuth$.subscribe(
(bool:boolean)=>{
this.isAuth=bool
}
)
}
logout(){
this.authService.logout();
}
}
And finally this is the html template of the header just in case :
<!-- header start -->
<header>
<!-- header top start -->
<div class="header-top theme1 bg-dark py-15">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-7 order-last order-md-first">
<div class="static-info text-center text-md-left">
<p class="text-white">Join our showroom and get <span class="theme-color">10 % off</span> ! Coupon code : <span class="theme-color">Jstore2021</span></p>
</div>
</div>
<div class="col-lg-6 col-md-5">
<nav class="navbar-top pb-2 pb-md-0 position-relative">
<ul class="d-flex justify-content-center justify-content-md-end align-items-center">
<li>
Setting <i class="ion ion-ios-arrow-down"></i>
<ul class="topnav-submenu dropdown-menu" aria-labelledby="dropdown1">
<li>My account</li>
<li>Checkout</li>
<li>Sign out</li>
</ul>
</li>
<li>
USD $ <i class="ion ion-ios-arrow-down"></i>
</li>
<li class="english">
<a href="#" id="dropdown3" class="pr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="assets/img/logo/us-flag.jpg" alt="us flag"> English
<i class="ion ion-ios-arrow-down"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- header top end -->
<!-- header-middle satrt -->
<div class="header-middle pt-20">
<div class="container">
<div class="row align-items-center">
<div class="col-sm-6 col-lg-2 order-first">
<div class="logo text-center text-sm-left mb-30 mb-sm-0">
<img src="assets/img/logo/logo-dark.jpg" alt="logo">
</div>
</div>
<div class="col-sm-6 col-lg-5 col-xl-4">
<!-- search-form end -->
<div class="d-flex align-items-center justify-content-center justify-content-sm-end">
<div class="media static-media mr-50 d-none d-lg-flex">
<img class="mr-3 align-self-center" src="assets/img/icon/1.png" alt="icon">
<div class="media-body">
<div class="phone">
<span class="text-muted">Call us:</span>
</div>
<div class="phone">
([phone]
</div>
</div>
</div>
<!-- static-media end -->
<div class="cart-block-links theme1">
<ul class="d-flex">
<li class="mr-0 cart-block position-relative" >
<a class="offcanvas-toggle" routerLink="/cart">
<span class="position-relative">
<i class="icon-bag"></i>
<span class="badge cbdg1" *ngIf="resume">{{resume.quantity}}</span>
</span>
<span class="cart-total position-relative" *ngIf="resume">{{resume.costTTC/100|currency:'EUR'}}</span>
</a>
</li>
<!-- cart block end -->
</ul>
</div>
<div class="mobile-menu-toggle theme1 d-lg-none">
<a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
<svg viewbox="0 0 800 600">
<path
d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
id="top"></path>
<path d="M300,320 L540,320" id="middle"></path>
<path
d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-6 order-lg-first">
<div class="search-form pt-30 pt-lg-0">
</div>
</div>
</div>
</div>
</div>
<!-- header-middle end -->
<!-- header bottom start -->
<!-- header bottom start -->
<nav class="header-bottom theme1 d-none d-lg-block">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-10 offset-lg-2 d-flex flex-wrap align-items-center position-relative">
<ul class="main-menu d-flex">
<li routerLinkActive="active"><a routerLink="/">Home</a></li>
<li routerLinkActive="active"><a routerLink="/shop">Shop</a></li>
<li routerLinkActive="active"><a routerLink="/add-product">Add product</a></li>
<li routerLinkActive="active" ><a routerLink="/signin" *ngIf="!isAuth">Login</a></li>
<li routerLinkActive="active" ><a routerLink="/signup" *ngIf="!isAuth">Register</a></li>
<li routerLinkActive="active" style="color: black;cursor: pointer;" *ngIf="isAuth" (click)="logout()"><a >Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- header bottom end -->
</header>
Sorry I forgot to post the cart class and template so here they are :
import {Item} from '../models/item';
export class Cart {
items:Item[]=[];
resume:{quantity:number,costHT:number, costTaxe:number,costTTC:number};
}
And the item class :
import { Product } from "./product";
export class Item {
product:Product;
quantity:number;
}

Answer 1

All I needed to do was add this line as the first line of the updateCart() function:
resume={quantity=0,costHT=0, costTaxe=0,costTTC=0};