Angular is showing an error stating that the type 'EventEmitter' is not generic

Question

Angular is showing an error stating that the type 'EventEmitter' is not generic

As I follow along with a tutorial, I've come across the use of EventEmitter. The code snippet provided in the tutorial is as follows:

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

However, my Visual Studio Code is flagging these errors:

The error "Type 'EventEmitter' is not generic."
"Expected 0 type arguments, but got 1."

Even after checking the Angular website, it seems that the code should be correct.

My current setup includes Angular CLI: 1.7.4; Node: 8.11.1; Typescript: 2.8.1.

angular typescript

Answer 1

Answer №1

It appears that you are currently utilizing the native EventEmitter from the node/index.d.ts file.

import { EventEmitter } from 'events';

Solution

To resolve this issue, update the import statement to use the EventEmitter from Angular:

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

Answer 2

It appears that you are currently utilizing the native EventEmitter from the node/index.d.ts file.

import { EventEmitter } from 'events';

Solution

To resolve this issue, update the import statement to use the EventEmitter from Angular:

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

Answer 3

Answer №2

In the latest update of VS code IDE (V1.60.0), I noticed that it automatically inserted this code snippet:

import { EventEmitter } from 'stream';

Upon closer inspection, I realized that this is incorrect and should be replaced with the following:

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

Answer 4

In the latest update of VS code IDE (V1.60.0), I noticed that it automatically inserted this code snippet:

import { EventEmitter } from 'stream';

Upon closer inspection, I realized that this is incorrect and should be replaced with the following:

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

Answer 5

Answer №3

While working through the tutorial, I encountered a similar issue.

The issue pertains to an import statement. To resolve it, ensure that EventEmitter is imported from @angular/core

Here's the correct import statement:

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

By using this corrected import, the problem should be resolved.

Answer 6

While working through the tutorial, I encountered a similar issue.

The issue pertains to an import statement. To resolve it, ensure that EventEmitter is imported from @angular/core

Here's the correct import statement:

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

By using this corrected import, the problem should be resolved.

Answer 7

Answer №4

The most recent update for Angular 13 has arrived!

This issue is occurring because the EventEmitter may have been mistakenly imported from the events module.

import * as EventEmitter from 'events';

Alternatively,

import { EventEmitter } from 'events';

To resolve this problem, ensure that you import EventEmitter from @angular/core

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

Answer 8

The most recent update for Angular 13 has arrived!

This issue is occurring because the EventEmitter may have been mistakenly imported from the events module.

import * as EventEmitter from 'events';

Alternatively,

import { EventEmitter } from 'events';

To resolve this problem, ensure that you import EventEmitter from @angular/core

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

Answer 9

Answer №5

When working in visual studio code and trying to capture a user click event from an HTML file within a component,

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

the import statement is automatically generated as

import { EventEmitter } from '@angular/event'

instead of

import { EventEmitter } from '@angular/core'

.

For more information, visit:

Answer 10

When working in visual studio code and trying to capture a user click event from an HTML file within a component,

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

the import statement is automatically generated as

import { EventEmitter } from '@angular/event'

instead of

import { EventEmitter } from '@angular/core'

.

For more information, visit:

Angular is showing an error stating that the type 'EventEmitter' is not generic

Answer №1

Solution

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the process for creating a new element and utilizing its reference to add child elements in React?

Developing Angular2 applications in Visual Studio Team Services (formerly known as Visual Studio Online)

By pairing delay(0) with refCount(), we can achieve optimal efficiency

Executing an Angular 4 script using a scheduled CRON job

How can I utilize Angular services to transfer a count value to the Component?

The useForm function from react-hook-form is triggered each time a page is routed in Nextjs

Using TypeScript to asynchronously combine multiple Promises with the await keyword

Angular 2 Return {responseBody: "assigned variable with [object Object]"}

Verify the occurrence of an element within an array inside of another array

Creating non-changing identifiers with ever-changing values in Angular by leveraging TypeScript?

"Implementing marker clustering within Angular version 10 and above: A step-by-step

"Exploring the differences between normalization structures and observable entities in ngrx

BrowserRouter - The type '{ children: Element; }' is not compatible with the type 'IntrinsicAttributes', as they do not share any properties in common

Assess the equation twice using angular measurement

Navigating through different pages in Angular2 using Asp.net 4.5

Angular 5 and Bootstrap card with enhanced double-click functionality

The status of the 'slider' may be 'undefined'

Ways to incorporate Bootstrap components into an Angular application without relying on external modules

Does anyone know how to retrieve the application version or import the package.json file? Can't seem to find the solution on

Create a package themed with Material UI for export