1

我正面临使用 Angular Elements 构建小部件的奇怪行为。我创建了一个小部件来在另一个站点上弹出一个简单的反馈表单，也使用 Angular 构建，并且在开发中工作得很好，但是当我构建应用程序以进行生产时，小部件和一些延迟加载的模块之间存在不兼容。

首次加载应用程序时，小部件会从外部 URL 加载到应用程序中。然后我登录到应用程序，当一个模块被延迟加载时，它会报告以下错误

一些上下文信息：

  • 小部件是使用 "@angular/elements": "^7.0.1" 构建的
  • 该小部件正在使用 pollyfill，因为 Web 组件尚未被广泛采用。
  • pollyfills 使用 Zone.js
  • 该应用程序是使用 Angular 7.0.1 构建的

深入研究这个模糊的错误消息，我发现这与应用程序和小部件两次加载的 Zone.js 有关，这是与此相关的问题 - https://github.com/angular/angular/issues/24466 - https ://github.com/angular/angular/issues/24181 - https://github.com/angular/angular/issues/26158

Uncaught Error: Zone already loaded.
    at polyfills.d19af636bcf00eb4898f.js:1
    at polyfills.d19af636bcf00eb4898f.js:1
    at Object.0TWp (polyfills.d19af636bcf00eb4898f.js:1)
    at a (runtime.f35a2a91d37680127d85.js:1)
    at Module.hN/g (polyfills.d19af636bcf00eb4898f.js:1)
    at a (runtime.f35a2a91d37680127d85.js:1)
    at Object.1 (polyfills.d19af636bcf00eb4898f.js:1)
    at a (runtime.f35a2a91d37680127d85.js:1)
    at r (runtime.f35a2a91d37680127d85.js:1)
    at Array.t [as push] (runtime.f35a2a91d37680127d85.js:1)

我也尝试过这个解决方案，但没有成功： - https://www.npmjs.com/package/elements-zone-strategy

我是 Angular Elements 的新手，任何帮助都将不胜感激。

4

2 回答 2

0

这个已经修复了zone.js，还没有发布，https://github.com/angular/zone.js/pull/1121，请等待zone.js的下一个发布

于 2018-11-23T01:26:32.490 回答
0

您的角度元素不需要 zone.js。您可以按照这篇文章删除 zone.js 依赖项并处理副作用。 https://www.softwarearchitekt.at/post/2018/07/06/angular-elements-without-zone-js.aspx

于 2018-11-15T10:12:45.790 回答