"Type 'EventEmitter' is not generic" ERROR in angular

I'm currently following a tutorial and the tutorial is making use of EventEmitter. The code goes like this

@Output() ratingClicked: EventEmitter<string> =
        new EventEmitter<string>();

But it visual studio code gives me these errors:

1. Type 'EventEmitter' is not generic.
2. Expected 0 type arguments, but got 1.

Even in the angular website it looks like that code is correct.

I'm currently using Angular CLI: 1.7.4; Node: 8.11.1; Typescript: 2.8.1

You are probably using the node native EventEmitter from node/index.d.ts i.e.

import { EventEmitter } from 'events';

Fix

Change the import to the one from angular:

import { EventEmitter } from '@angular/core';

For me, VS code IDE V1.60.0 has added automatically this code:

import { EventEmitter } from 'stream';

However, it is wrong and you should replace it with this

import { EventEmitter } from '@angular/core';

I was doing the same tutorial and faced the same issue.

It is a problem with an import. EventEmitter must be imported from @angular/core

Use:

import { EventEmitter } from '@angular/core';

This will fix it.

In visual studio code when your try to listen to user click event from your html file of the component

@Output() event: EventEmitter<string> = new EventEmitter<string>();

it automatically import this to the component import { EventEmitter } from '@angular/event' instead of import { EventEmitter } from '@angular/core'.

Resource: https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

This is the latest update for Angular 13

This is happening because the EventEmitter might be imported from the events module.

import * as EventEmitter from 'events';

Or

import { EventEmitter } from 'events';

To fix this, import EventEmitter from @angular/core

import { EventEmitter } from '@angular/core';