Verifique se a saída está presente no componente

Considere o seguinte componente:

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

Com a ligação:

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

Observe que eu escrevi em selectedChangevez do nome de saída correto selectionChange. O Angular 9 com a bandeira strictTemplatesativada não me ajudou em nada. Falha silenciosamente. A parte interessante é que, se eu fizer o mesmo @Input, o aplicativo detectará o (s) erro (s) e não será compilado.

Existe alguma maneira de gerar um erro se eu tentar "ouvir" um inexistente @Output?

Não há erro lançado porque a ligação de evento em angular é usado não só com @Outputs e EventEmitters, mas também para ouvir os eventos DOM , como click, keyup, etc. Pode até ser usado para ouvir eventos personalizados . Por exemplo, se você criar e emitir um evento personalizado no componente filho:

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

Em seguida, no componente pai, você pode identificá-lo pelo nome:

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

Angular usa target.addEventListener (tipo, ouvinte [, opções]); internamente (você pode verificar isso nos links abaixo), onde typepode haver qualquer string.

É por isso que não lança nenhuma exceção se não encontrar @Outputs correspondentes .

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Não há solução direta para o seu problema, no entanto, alguns casos podem ser abordados.

1. Se você tiver alguma saída usada em 100% dos locais, como clickevento de botão , poderá fazer parte do seletor, por exemplo selector: 'app-test[selectionChange]'. Além disso, você pode fazer isso por exemplo: selector: 'app-test[selectionChange]', app-test[click]'significado clickou selectionChangeé necessário.
2. Se você estiver refatorando o código e renomeando a saída, ou seja, selectionChangepara selectedChangeisso, poderá usar este seletor: selector: 'app-test:not([selectionChange])'para forçar os usuários a atualizar.

Se você estiver usando o Código VS, poderá instalar esta extensão: O Angular Language Service emitirá um aviso quando um método ou propriedade não estiver definido. Esta extensão funciona com saídas e entradas (e attrs, etc ...).