tutorial wrong

[WWaterWoo]

Describe the problem that you experienced

when I was following this link https://angular.io/start/start-data to learn angular with these code:
export class CartComponent {

items = this.cartService.getItems();

constructor(
private cartService: CartService
) { }
}

, I encountered the ERROR
Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'getItems')
TypeError: Cannot read properties of undefined (reading 'getItems')
at <instance_members_initializer> (https://angular-vsdzag.stackblitz.io/~/src/app/cart/cart.component.ts:18:30)

then i struggled to change the code myself. It's a very long time for me to find what's wrong. I thought it was likely due to the fact that the cartService is being accessed before it's initialized in CartComponent. The constructor is called before the instance variables are initialized. Therefore, when trying to access this.cartService.getItems() in the initialization of items, cartService is still undefined.
So, I changed the code to:
export class CartComponent {
items: Product[];

constructor(private cartService: CartService) {}

ngOnInit(): void {
this.items = this.cartService.getItems();
}
}

It finally works.

So, I hope you can check the tutorial again to avoid similar problems for fresh learner like me. Thank you so much! Best wishes.

Enter the URL of the topic with the problem

https://angular.io/start/start-data

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

No response

[JoostK]

The code suggested in the tutorial should work, provided that useDefineForClassFields is set to false, which is the default in Angular CLI applications.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}