问题标签 [zonejs]

webpack 4.29.3我有一个使用 react 编写的可嵌入小部件，并使用和捆绑到单个 js 文件中babel 7。一切正常webpack-dev-server，production只需在 html 中插入<script type="text/javascript" src="myWidget.js"></script>标签即可。我的 webpack 配置如下：（我已经包含babel-polyfill）

我的 babel 配置如下：

但是，当我尝试将小部件嵌入到以 Angular 4 编写的网站时，它说TypeError: t.finally is not a function虽然我已将其包含polyfill在 react webpack 构建中。我发现原因是zone.jsangular 覆盖了 babel polyfill。当我将主机站点（角度站点）zone.js版本从0.8.14可0.8.26嵌入小部件更新为工作正常时。我的问题是在实际情况下，我无法控制嵌入小部件的主机站点。那么在这种情况下，我该如何克服呢？

背景，有一个最初用 angularjs 构建的应用程序，现在它是使用 UpgradeModule 的 angularjs/ angular 混合。从角度区域掉出并最终进入该<root>区域一直存在问题。遇到了一个相当可重复的例子。

遇到了一个相当频繁地再次出现的问题，即卡在该<root>区域中，并且已经被提炼成这个。因此，创建 Promise 的 3 种方法都从角度区域开始。

new Promise(blahblah)

返回 ZoneAwarePromise

new $q(blahblah)

回报承诺

let def = $q.defer(); return def.promise

回报承诺

所以，在我看来，这看起来像 $q 承诺没有被区域修补，因此角度区域没有得到维护，回调最终在<root>. 当某些东西在来自某种远程请求的承诺的回调中运行应用/摘要时，这会导致角半部分的事情非常缓慢（一旦发生）和偶尔的摘要错误。常见的罪魁祸首是 $http 和来自 angularfire 库的回调等。

所以...简而言之，UpgradeModule 是否旨在将 angularjs 承诺 ($q) 修补为 ZoneAwarePromise 的？这是我所期望的。

编辑：这是 StackBlitz 上的一个更简单的示例。此示例显示与我的应用程序中的相同：UpgradeModule 不修补 $q 承诺：https ://stackblitz.com/edit/github-fwbk4x?file=src%2Fapp%2Fhome%2Fapp.component.ts

我在 Angular 7 应用程序中遇到问题。当我有一个 finally 块的承诺时，不会抛出错误！他们在没有注意到的情况下被吞下，当我删除 finally-block 时，它的行为就像预期的那样。

以下是一些示例：使用 vanillaJS（无 Angular 框架），它的工作方式与我期望的一样：一旦您运行代码，它就会将我的 console.logs 打印到控制台并抛出“Uncaught (in promise)”错误. 另见截图。

截图 vanillaJS

在这里，我们在 Angular 中有相同的代码。请参阅 Stackblitz 以供参考： https ://stackblitz.com/edit/angular-iv7cq2

当我删除“最后”时，它会像我期望的那样抛出错误。使用“finally”，它只会吞下错误。

截图角度

这是为什么？我必须在哪里修改我的代码，以便带有 finally-blocks 的 Promise 也会抛出错误？

我目前正在开发一个 angular7-app，通过 CLI 以标准方式创建它并开始编码。现在我想录制一些在现代浏览器中不难的音频。我正在使用getUserMedia(). 现在问题来了：zone.js 捕获了对then()回调的所有调用，并且不允许执行内部的自定义代码。

但是：有 zone.js 提供的补丁，所以这个特殊的回调被称为：https ://github.com/angular/zone.js/blob/master/dist/zone-patch-user-media.js

不幸的是，这指的是getUserMedia()（https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia）的折旧实现。所以这个脚本不起作用。我尝试更改它，但没有任何效果。之所以调用补丁，是因为console.log()已显示并且在调试器中，我可以通过该函数。我认为，这可能是执行回调的一个小改动。在调试器中，回调再次被 zone.js 中的一个函数捕获，正如我假设的那样，当补丁工作时不应调用该函数。我的实现与此处相同（https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia）：

那么，目前让回调起作用的方法是什么？还是我理解错了？或者我应该使用 npm 中的一些库来录制音频？

我对 mat-dialog 有类似的问题，我无法打开/关闭它。有趣的是，在我刷新组件后它可以工作大约 20 分钟。但在那之后，它停止工作。

我读了这个问题https://github.com/angular/components/issues/9875 和这个https://github.com/angular/components/issues/9676 和这个https://github.com/angular/components/问题/7550#issuecomment-345250406 和这个 StackOverflow 答案： Angular Material Dialog not closed after navigation

所有人都建议“不知何故，我的代码在角度区域之外运行，所以我需要重新进入该区域”

因此改变：

不知何故，用 ngZone.run() 包装 openDialog 解决了这个问题。

但这是我不明白的部分。为什么我的代码在角度之外运行？我从不明确调用 runOutsideAngular 并且 onButtonClick 也不在异步回调中。

实际上，onButtonClick 是直接与按钮元素绑定的，如下所示：

那么为什么我的代码在 Angular 之外运行呢？

我正在将我的 Angular 项目迁移到 Angular 8 并遇到了这两篇文章：

• https://blog.angularindepth.com/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb
• https://blog.angularindepth.com/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular-16f7a575afef

我现在有兴趣实现一个没有 zonejs 的项目。

我跑了npm remove zone.js，然后我删除import 'zone.js/dist/zone';了polyfill.js，然后我, {ngZone: 'noop'}在bootstrapModule我的main.ts.

我的应用程序在哪里运行。

但当然现在我应该手动添加需要更改检测的点，这就是这些指南严重失败的地方。也许它们已经过时了（分别在 2018 年和 2017 年发布，仅 1-2 年前）。

他们的方法（以及您可以使用的其他谷歌点击.tick()）引用不存在的类或确实存在但没有的类.tick()。

Angular 8-9、es6、ECMAScript、手动更改检测的类型实现的真实示例是什么？

例如，现在我的登录页面上缺少一个应该在收到令牌后重定向的页面：

我更新了一个我最近从 Angular 6 继承到 Angular 8 的 Electron 应用程序。使用 zone.js 0.9.1（更新：根本原因是这个版本的 zonejs 中的错误 - 请参阅下面的自我回答）

遵循升级指南等，一切都在编译和运行——直到我开始触发更新模型的操作并注意到视图没有立即更新。我注意到的行为是，如果我执行诸如单击选项卡或打开对话框或单击按钮之类的操作，则在单击其他内容之前视图不会更新。

我意识到这是某种变化检测或区域问题，但其他一切正常。但无论出于何种原因，该区域无法识别模型更改，因此视图不会刷新，直到另一个动作（如单击）触发它。

在 Angular 之外进行更改后，我有一些处理更新视图的经验，因此我尝试在区域承诺中包装几个事件处理程序，如下所示：

this.zone.run(() => ...do the stuff it was doing before... )

它起作用了——在重新编译应用程序后，我现在看到按钮单击和对话框打开时视图立即更新，就像它在 Angular 6 中所做的那样。

但是后来我发现很多我没有自己的处理程序的更改也不起作用，例如更改内部的选项卡mat-tab-group和默认对话框按钮。

所以这变成了一个兔子洞——我可能会为每个选项卡单击和按钮单击实现自定义事件处理程序，但这似乎是一个巨大且不必要的痛苦，特别是考虑到我没有对应用程序逻辑本身进行任何更改，只是升级到 Angular 8。我可能忘记了一些东西或有一个奇怪/特殊情况，因为它是一个电子应用程序（我最近使用相同的将网络应用程序从 Angular 6 转换为 8 时没有遇到这些问题过程）。

我难住了。希望社区可以指出我的问题和解决方案——如果一切都失败了，我想我会编写大量的自定义处理程序并将每一行代码包装进去this.zone.run(()=>...)——谢谢！

我试图使用（dist/index.html）从打字稿包加载我的角度构建。它的加载很好，但是当我一次又一次地尝试加载相同的内容时，它显示以下错误。

VM5485:1 未捕获错误：区域已加载。在新 d (:1:211206)

VM5457:1 未捕获的错误：Zone.js 检测到 ZoneAwarePromise(window|global).Promise已被覆盖。

我试过：从 polyfills.ts 中删除 zone.js 并添加“angularfire2”：“5.0.0-rc.4”。

但没有运气。有人可以帮忙吗

首先，我很清楚zone.runOutsideAngular(callback)，记录在这里。

此方法的作用是在与 Angular不同的区域中运行回调。

我需要为document'smousemove事件附加一个非常快速的回调（以计算空闲时间）。我不想将整个 Zone.JS 任务机制附加到此特定回调的执行队列中。我真的很想让回调在普通的、未打补丁的浏览器运行时中运行。

我拥有的活动注册码是：

问题是我怎样才能让这段代码使用unpatched document.addEventListener，实现与 Zone.JS 的完全分离和真正的原生性能？

我们在遗留项目中使用 webcomponents，我们有一个问题，zone.js 修补了所有 ajax 调用，这非常糟糕，因为由于项目限制，我们没有通过 webcomponent 进行任何 ajax 调用。

我知道建议在 webcomponents 中禁用 zone.js，例如

但我们不想这样做，因为我们的 web 组件非常复杂，我们不想手动进行更改检测。

有没有办法只通过 zone.js 禁用 ajax 修补？