`@HostListener` of `e: TouchEvent` causes Firefox to crash with "ReferenceError: TouchEvent is not defined."

Question

将 @HostListener 与明确键入为 TouchEvent 的事件参数一起使用会导致 Firefox 崩溃并显示以下错误消息：

ReferenceError: TouchEvent is not defined.

一个例子：

@HostListener('touchstart', ['$event']) // or 'touchend', 'touchmove'
onTouchStart(e: TouchEvent): void {}

我自己可以想出一些方法来防止这种情况发生：

使用 e: TouchEvent | any 或 e: any（或者根本不指定类型）
使用elRef.nativeElement.addEventListener('touchstart', (e: TouchEvent) => {})
使用Observable.fromEvent(elRef.nativeElement, 'touchstart').subscribe((e: TouchEvent) => {})

但是使用 any 或 | any 似乎是 hack，其他两个选项没有利用框架。 是否有另一种更好、更安全的方法来处理这个问题，如果没有，哪个选项更可取？

（也许有人还可以解释 Angular 实际上在做什么，以及为什么只有当事件被明确键入为 TouchEvent 时才会发生此错误...）

编辑：Angular7 中仍然存在该问题。编辑：~~此问题显然已在 Angular 6.~~

中得到修复

Answer 1

您可以告诉 Angular 不要在 tsconfig.json 中发出装饰器元数据： "emitDecoratorMetadata": false

Answer 2

当方法上有装饰器时，typescript 编译器将参数类型存储在元数据中，这在桌面 Firefox 中失败，因为那里没有定义 TouchEvent。它可以通过用存根填充缺失的类型来解决。只需将以下代码添加到 polyfills.ts

for (const type of ['TouchEvent']) {
    if (typeof window[type] === 'undefined') {
        window[type] = function () { };
    }
}

要填充其他类型，请将它们添加到列表中。一句警告——这可能会破坏通过检测 window.TouchEvent.

检查是否存在触摸事件的代码

无论如何，这个问题似乎只发生在 JIT 编译器上，所以它可能会随着 Ivy 消失。

firefox