Une erreur est survenue: @Output non initialisé

Question

Je travaille sur une application angular pour que les gestionnaires puissent suivre leurs équipes et je suis bloqué par une erreur @Output:

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.

J'ai un composant de réunions, générant une liste de composants MeetingItem. Je souhaite effectuer des actions lorsque l'utilisateur clique sur différents boutons (modifier, supprimer, afficher les détails).

Voici mon modèle de réunions parent:

<div class="meeting__list" [@newMeeting]="meetings.length">
  <app-meeting-item
    *ngFor="let meeting of meetings"
    [meeting]="meeting"
    (deleteMeeting)="deleteMeeting($event)"
    (openMeetingDialog)="openMeetingDialog($event)"
    (messageClick)="openMessage($event)"
  ></app-meeting-item>
</div>

Mon modèle MeetingItem (uniquement la partie concernée par ce message):

<span class="meeting__actions">
    <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message"
      matTooltipPosition="above" class="icon--notes">notes</mat-icon>
    <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon>
    <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" class="icon--delete">delete_outline</mat-icon>
  </span>

Mon composant MeetingItem:

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

@Component({
  selector: 'app-meeting-item',
  templateUrl: './meeting-item.component.html',
  styleUrls: ['./meeting-item.component.scss']
})
export class MeetingItemComponent {

  @Input() meeting;

  @Output() deleteMeeting = new EventEmitter();
  @Output() openMeetingDialog = new EventEmitter();
  @Output() messageClick = new EventEmitter();

  constructor() {}

  onDeleteMeeting(meetingId) {
    this.deleteMeeting.emit(meetingId);
  }

  onOpenMeetingDialog(meeting) {
    this.openMeetingDialog.emit(meeting);
  }

  onMessageClick(meeting) {
    this.messageClick.emit(meeting);
  }
}

Answer 1

Pour que votre code fonctionne dans un stackblitz , je devais remplacer

import { EventEmitter } from 'events';

avec

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

Answer 2

Dans votre composant, utilisez simplement le module principal angular. Il suffit de mettre ce code au début du fichier.

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