ClipboardEvent undefined in IE11

Question

I have the following code in one of my Angular directives:

  @HostListener('paste', ['$event'])
  onPaste($event: ClipboardEvent) {
    setTimeout(() => {
      const input = (<HTMLInputElement>$event.target);
      input.value = input.value.replace(/\D/g, '');
    });
  }

It fails in IE11 with an error saying that ClipboardEvent is undefined. Luckily I could type it to just Event, but I am wondering why it breaks - is there any lib that I could add in angular-cli.json to make it work with ClipboardEvent?

"lib": [
  "es2017",
  "dom"
],

"dom" is where Event comes from...

Answer 1

It seems to be an issue in IE with angulars JIT (Just-In-Time compilation) build mode. It helped to use AOT (Ahead-Of-Time). Then there's no error loading the site.

ng build --aot

JIT makes the browser compile the code on runtime and IE seems to not compile correctly (that's guessing!).
Here's the explaination of difference bewteen AOT and JIT: https://angular.io/guide/aot-compiler

Note:
Paste from clipboard does still not work in IE, though. Here is well explained why it's not working everywhere: Clipboard Event (Stack Overflow)

Answer 2

Use like this

@HostListener('paste', ['$event'])
  onPaste($event) {
    var clipboardData; 
    if (window['clipboardData']) { // IE 
       clipboardData = window['clipboardData']; 
    } else if ($event.originalEvent.clipboardData && $event.originalEvent.clipboardData.getData) { // other browsers 
       clipboardData = $event.originalEvent.clipboardData; }
    }}

Clipboard event still under experimental technology. This will work.