Angular 'is not a function' caused by missing import?

Question

Getting an 'is not a function' in Angular 7 / typescript 3-ish, using an EventEmitter. Much has been written (a b) about this error, but very few upvotes for answers (a b c d e f ). I'm almost there, but need some help finishing this off.

Here is one stackblitz with the error. ...and a similar one without the error.

The only difference seems to be that with the error, my event emitter and receiver are in sibling folders. In the one that works, the event receiver is in a parent folder and the emitter is in a child folder.

It seems like some kind of an import/module tweak is required to fix the broken one, but I can't seem to get it. Suggestions?

Answer 1

There is a typo in your parent.component.ts file. You named function as parentListner in ts file but used parentListener in html file.

Answer 2

In your parent ts. You have a function:

parentListner($event) {
    this.childMessage = $event
 }

While in html you are calling:

<app-child (childEvent)="parentListener($event)"></app-child>

Names have to be the same.