Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2/4 - Cannot read property subscribe of undefined

Tags:

angular

I am new to Angular and recently start to learn it by reading a book 'ng-book The Complete Book on Angular 4'. In the 'how angular works' chapter I wrote a small inventory app followed by the instructions on the book but having issue after startup, shown as below: error log on browser console

All my components seem alright and the errors are just not seem relevant to my code. I even compared to the example code downloaded and they look very identical.

I know it's probably not that much of a big deal and I should move on and go back to this when I gain more knowledge. But really it's bothering me...

Not sure what's the best way of showing all my source code here so I created a shareable google drive link and a .zip with everything in that project can be retrieved by the link. ANY HELP WILL BE HIGHLY APPRECIATED!!!

https://drive.google.com/file/d/0B76fFkACV6wRdmtJU0Jfc0J4U1U/view?usp=sharing

like image 961
Jay.Z Avatar asked Jun 14 '17 11:06

Jay.Z


People also ask

How do you fix undefined properties Cannot be read?

To solve the "Cannot read properties of undefined" error, make sure that the DOM element you are accessing exists. The error is often thrown when trying to access a property at a non-existent index after using the getElementsByClassName() method. Copied!

Can not read property Subscribe of undefined?

This issue means that something has been replaced with a mock object and returns a dummy result ( undefined ) instead of observable streams. There is an answer for this error in the section called How to mock observables, if the error has been triggered by a mock service, and its property is of type of undefined .

What is subscribe in angular?

Subscribe() is a method in Angular that connects the observer to observable events. Whenever any change is made in these observable, a code is executed and observes the results or changes using the subscribe method. Subscribe() is a method from the rxjs library, used internally by Angular.


1 Answers

In ProductsListComponent, you need to change :

@Output() onProductSelected: EventEmitter<Product>;

to :

@Output() onProductSelected = new EventEmitter<Product>();

Also, remove the line in ngOnInit in the same component.

The event emitter needs to be initialized when the class is created. See this example : http://learnangular2.com/outputs/

like image 113
Sherif Behna Avatar answered Nov 13 '22 17:11

Sherif Behna