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

Question

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

Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading 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 中看到一个用最少代码重现它的项目

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

提前致谢!

Answer 1

对于那些仍在寻找非常简单的修复方法的人来说，这对我有用。

第 1 步)将 import 'zone/dist/...' 内容从 polyfill.ts 文件移动到 main.ts Bootstrap 之前的文件。

所以在你的 main.ts 文件中，你应该有这样的东西:

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

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

请确保您已将其从 polyfill.ts 文件中完全删除

第 2 步)利润。

---

好的，让我解释一下实际发生的事情(我注意到的):

存在竞争条件，有时会在 zone.js 模块覆盖原生 promise 之后添加 polyfilled promise。这就是导致 Zone 识别它已被替换并抛出该错误的原因。

无论我放入导入的 polyfill.ts 中的顺序如何，都会发生这种情况。

我最初尝试将 zone.js 的加载器设置为一个短计时器(100 毫秒)的超时。这可以防止出现我们都看到的错误消息，但有时触发速度不够快，无法在 启动 Bootstrap 之前加载 zone.js 模块。

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

当时的想法是让 zone.js 在加载 Bootstrap 之前最后正式导入。我想确保它能正常工作:

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

因此将 import 'zone.js/dist/zone' 行放在 main.ts 中一劳永逸地解决了这个问题。然后您的 polyfill.ts 文件可以自由引入并加载任何必要的模块，然后再导入该 zone.js 文件。