Zone.js 检测到 ZoneAwarePromise `(window|global).Promise` 已被覆盖

我正在尝试在我的应用程序中使用 Typeform 库，但遇到很多问题。加载 js 脚本后，Angular 区域错误，我收到以下消息：

错误：Zone.js 已检测到 ZoneAwarePromise(window|global).Promise已被覆盖。 最可能的原因是在 Zone.js 之后加载了 Promise polyfill（加载 zone.js 时不需要 Polyfilling Promise api。如果必须加载，请在加载 zone.js 之前加载。）

我的 app.component.ts 的代码是：

import { Component, Inject, AfterViewInit} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as typeformEmbed from '@typeform/embed';

@Component({
  selector: 'my-app',
  template: `<div #my_typeform></div>`,
})


export class AppComponent implements AfterViewInit {
  constructor(
    @Inject(DOCUMENT) private document: Document
  ){}

  ngAfterViewInit() {
    const element = this.document.getElementById.call(document, 'my_typeform');
    typeformEmbed.makeWidget(element, 'https://jonathan.typeform.com/to/zvlr4L', { onSubmit: () => console.log('Close') });
  }
}

我尝试手动运行 ngZone 以确保它在 Angular 区域内运行，但没有成功。在这种情况下，app.component.ts 就像

import { Component, Inject, AfterViewInit, NgZone} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as typeformEmbed from '@typeform/embed';

@Component({
  selector: 'my-app',
  template: `<div #my_typeform></div>`,
})


export class AppComponent implements AfterViewInit {
  constructor(
    @Inject(DOCUMENT) private document: any,
    @Inject(NgZone) private ngZone: NgZone
  ){}

  ngAfterViewInit() {
    this.ngZone.run(() => {
      const element = this.document.getElementById.call(document, 'my_typeform');
      typeformEmbed.makeWidget(element, 'https://jonathan.typeform.com/to/zvlr4L', { onSubmit: () => console.log('Close') });
    });
  }
}

我还尝试在我的 polyfill.ts 文件中导入 'zone.js/dist/zone-patch-rxjs' ，但它也不起作用。

您可以看到一个具有最少代码的项目来重现它https://stackblitz.com/edit/angular-issue-repro2-daytbo https://stackblitz.com/edit/angular-issue-repro2-daytbo

非常欢迎任何线索或帮助！

提前致谢！

对于那些仍在寻找非常简单的解决方案的人来说，这对我有用。

步骤 1) 移动您的import 'zone/dist/...'来自你的东西polyfill.ts文件到你的main.ts在引导程序之前创建文件。

所以在你的main.ts文件，你应该有类似的内容：

import 'zone.js/dist/zone'  // Included with Angular CLI.

platformBrowserDynamic()
    .bootstrapModule(AppModule, { ngZone: new NgZone({}) })

并且确保您已将其完全从您的设备中删除polyfill.ts file

步骤 2) 利润。

好的，让我解释一下实际发生的情况（我注意到的）：

有一个竞争条件，偶尔会在zone.js模块覆盖本机承诺。这就是导致 Zone 识别出它已被替换并抛出该错误的原因。

无论顺序如何，都会发生这种情况polyfill.ts我把进口的放进去。

我最初尝试将装载机用于zone.js在一个短定时器（100ms）的超时中。这可以防止出现我们都看到的错误消息，但有时触发速度不够快，无法加载zone.js module before点击引导程序。

很明显，这导致了竞争条件。 （我自己制作的。）

当时的想法是让zone.js在加载引导程序之前最后导入。我想确保这会起作用：

我能够通过放置来测试这一点console.log in the main.ts和polyfill.ts文件。我看到的是polyfill.ts总是在之前加载main.ts.

所以放置import 'zone.js/dist/zone'线在main.ts一劳永逸地解决了这个问题。那么你的polyfill.ts在获取该文件之前，可以自由地拉入并加载任何必要的模块zone.js文件导入。