에러 백과

지원하지 않는 이벤트 대상

Angular가 전역 이벤트 대상으로 인식하는 문자열 값은 'window', 'document', 'body' 세 가지뿐입니다. 전역 이벤트 리스너를 등록할 때 다른 문자열을 대상으로 전달하면 Angular가 대상을 찾지 못하고 이 오류를 발생시킵니다.

오류 디버깅하기

@HostListener나 Renderer2.listen()에서 사용한 대상 이름에 오타가 있는지 확인하세요. 'window' 대신 'windw'를 쓰는 작은 실수만으로도 오류가 발생합니다.

@Component({
  selector: 'app-example',
  template: '<button>Click me</button>',
})
export class Example {
  @HostListener('windw:resize') // typo — should be 'window'
  onResize() {}
}

Angular가 인식하지 못하는 문자열로 Renderer2.listen()을 직접 호출할 때도 마찬가지입니다.

this.renderer.listen('global', 'click', handler); // 'global' is not supported

오류 해결하기

대상을 지원하는 세 문자열 중 하나로 수정하거나 문자열 대신 실제 DOM 요소를 전달하세요.

@Component({
  selector: 'app-example',
  template: '<button>Click me</button>',
})
export class Example {
  @HostListener('window:resize')
  onResize() {}
}
// Use an element reference when you need to target something more specific
this.renderer.listen(this.elementRef.nativeElement, 'click', handler);