Compruebe si la salida está presente en el componente

Considere el siguiente componente:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

Con la llamada:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Tenga en cuenta que he escrito en selectedChangelugar del nombre de salida correcto selectionChange. Angular 9 con la bandera strictTemplateshabilitada no me ayudó en absoluto. Falló en silencio. La parte interesante es que si hago lo mismo @Input, la aplicación detecta los errores y no se compila.

¿Hay alguna forma de arrojar un error si trato de "escuchar" un inexistente @Output?

No hay error tirado porque el suceso de unión en angular se utiliza no sólo con @Outputs y EventEmitters, sino también para escuchar a los eventos DOM tales como click, keyup, etc. Incluso se podría utilizar para escuchar eventos personalizados . Por ejemplo, si crea y emite un evento personalizado en el componente secundario:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

Luego, en el componente principal, puede atraparlo por su nombre:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular usa target.addEventListener (type, listener [, options]); internamente (puede asegurarse de que typevea los enlaces a continuación), donde podría haber cualquier cadena.

Es por eso que no arroja ninguna excepción si no encuentra @Outputs coincidentes .

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

No hay una solución directa a su problema, sin embargo, algunos casos pueden estar cubiertos.

1. Si tiene alguna salida que se utiliza en el 100% de los lugares, como el clickevento de botón , puede hacerla parte del selector, es decir selector: 'app-test[selectionChange]'. También puede hacer esto, por ejemplo: selector: 'app-test[selectionChange]', app-test[click]'significado clicko selectionChangees obligatorio.
2. Si se reestructuran código y la salida es decir, cambio de nombre selectionChangea selectedChangecontinuación, puede utilizar este selector: selector: 'app-test:not([selectionChange])'para los usuarios de la fuerza para la actualización.

Si está utilizando VS Code, puede instalar esta extensión: Angular Language Service lanzará una advertencia cuando no se defina un método o propiedad. Esta extensión funciona tanto con salidas como con entradas (y atributos, etc.).