问题标签 [zonejs]

我正在使用角度监控元素的大小ResizeObserver

堆栈闪电战

当您在 safary、firefox 或 chrome 63 中运行代码时，它工作得很好

因此，在 chrome 64 ( can-i-use -> native support) 中，它不再起作用，它看起来像这样：

不知何故，chrome不会对来自的触发器进行changeDetectionResizeObserver

有什么建议可能是这种奇怪行为的原因吗？

更新：我根据下面的讨论更新了我的帖子

我有一个中型 Angular 应用程序，由于某些原因，我的一些量角器测试在针对我的实时生产环境运行时超时。

我相当确定超时发生是因为量角器在等待一些异步任务。我知道区域，我试图将所有长时间运行的异步任务排除在 ngZone 之外（根据常见问题解答），但由于某种原因量角器仍然超时。

我可能错过了一些东西，但我不知道如何调试问题。有没有办法找出代码量角器的哪一部分正在等待？

NgZone 只公开函数来确定是否有微任务或宏任务在运行，但没有告诉我是哪一个。

编辑：量角器显示的这种超时错误的典型示例：

失败：等待异步 Angular 任务在 11 秒后完成超时。这可能是因为当前页面不是 Angular 应用程序。有关更多详细信息，请参阅常见问题解答：https ://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

在等待带有定位器的元素时 - 定位器：By(css selector, [data-e2e='scroll-to-offer'])

该元素存在于页面上（我已手动验证），但量角器仍然超时。

我有一个 Angular 2 应用程序https://github.com/DanWahlin/Angular-JumpStart。我试图为我的一些用例修补 Element.prototype.addEventListener。

这是补丁：

如果我修补Element.prototype.addEventListener，它会破坏 Angular 2 应用程序。应用程序中未发送任何资源/XHR。我在许多 Angular 2 应用程序上都试过这个。但是，同样的结果。控制台中没有错误

有谁知道为什么会发生这种情况，是否有解决方法？

PS：我不想修补EventTarget.prototype.addEventListener，如此处所述

修改 HTMLElement.prototype.addEventListener 时 Angular 2 应用程序中断

我正在使用 WebRTC 构建一个应用程序，但它在 iOS Safari 上的 Angular 5 中不起作用。我使用原生 WebRTC API，没有框架。

首先没有 Angular

为了证明我的观点 Angular 是问题所在，我使用纯 html 和 javascript 进行了 WebRTC 测试。所以我有一个index.html和一个my-webrtc.js。

我把这两个文件放在一个 TSL/SSL 安全的网络服务器上。在同一台服务器上，我安装了一个基本的信令服务器。里面my-webrtc.js有一切：信号、提议、回答、候选者以及将流连接到 HTML 元素。

对于所有测试，我只使用 LAN 来确保不需要 STUN 或 TURN。

测试结果

在这些经过测试的情况下一切正常：

• 桌面/Chrome <-> 桌面/Chrome
• 桌面/Chrome <-> 桌面/Firefox
• 桌面/Chrome <-> 桌面/Safari
• 桌面/Chrome <-> Android/Tab/Chrome
• 桌面/Chrome <-> iPhone/Safari
• 桌面/Chrome <-> iPad/Safari
• 桌面/Safari <-> iPhone/Safari
• 桌面/Safari <-> iPad/Safari
• iPad/Safari <-> iPhone/Safari

设备规格：

桌面/Chrome
- Macbook MacOS 10.12.6
- Chrome 64.0.3282.140

桌面/火狐
- Macbook MacOS 10.12.6
- 火狐 58.0.1

桌面/Safari
- Macbook MacOS 10.12.6
- Safari 11.0.3

Android/Tab/Chrome
- 三星 Galaxy Tab3 8.0 英寸 (SM-T310)
- Android 4.4.2
- Chrome 64.0.3282.137

iPad/Safari
- iPad mini 2 (A1489)
- iOS 11.2.5
- Safari

iPhone/Safari
- iPhone 6 (A1586)
- iOS 11.2.5
- Safari

之后，我做了另一次测试，adapter-latest.js排除了index.html上述所有测试情况，然后仍然可以正常工作。

现在我把所有东西都放在 Angular 中

现在我进行下一步。我使用 Angular CLI 1.6.3 版来创建一个新的 Angular 测试应用程序：

它会生成一个新的 Angular 5.2.3 应用程序。对于信号我需要安装socket.io：

对于打字稿中的打字，我添加：

然后在app.component.html我把相同的index.html：

在app.component.ts我粘贴所有内容my-webrtc.js。我必须进行一些小的修改，以便 javascript 在 typescript 中工作。我还没有导入任何适配器。

然后构建它：

并将内容复制dist到同样运行信令服务器的 TSL/SSL 安全网络服务器。

测试结果

它在这些情况下运行良好：

• 桌面/Chrome <-> 桌面/Chrome
• 桌面/Chrome <-> 桌面/Safari
• 桌面/Chrome <-> Android/Tab/Chrome
• 桌面/Chrome <-> 桌面/Firefox

授予 iOS localStream 权限后可见。建立时RTCPeerConnection，remoteStream 在 iOS 上正常可见，并且几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则在双方 localStream 冻结。在以下情况下会发生这种情况：

• 桌面/Chrome <-> iPhone/Safari
• 桌面/Chrome <-> iPad/Safari
• 桌面/Safari <-> iPhone/Safari
• 桌面/Safari <-> iPad/Safari
• iPad/Safari <-> iPhone/Safari

添加 Webrtc 适配器

然后我安装webrtc-adapter：

在app.component.ts我放了一个import 'webrtc-adapter';

但事情变得更糟！

测试结果

它在这些情况下运行良好：

• 桌面/Chrome <-> 桌面/Chrome
• 桌面/Chrome <-> 桌面/Safari
• 桌面/Chrome <-> Android/Tab/Chrome
• 桌面/Chrome <-> 桌面/Firefox

授予 iOS localStream 权限后可见。建立时RTCPeerConnection，remoteStream 在 iOS 上正常可见，并且几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则在双方 localStream 冻结。在以下情况下会发生这种情况：

• 桌面/Chrome <-> iPhone/Safari
• 桌面/Chrome <-> iPad/Safari

LocalStream 两边可见，remoteStream 两边不可见。日志显示 peerConnection 已创建。发送/接收报价，发送/接收答案。RemoteStream 已添加但不可见。没有冰候选人被发送。RTC 对等连接状态更改为“检查”。没有错误消息。在以下情况下也会发生同样的情况：

• 桌面/Safari <-> iPhone/Safari
• 桌面/Safari <-> iPad/Safari
• iPad/Safari <-> iPhone/Safari

我的结论：

我有一个工作的 WebRTC 环境，只是带有 javascript 的纯 html。然后我用打字稿把它放到 Angular 5 中，它在 iOS Safari 上不再工作了。这一定是 Angular 5 或 typescript 或 zone.js 之类的依赖项的问题。

我的问题：

你同意我的结论还是我忽略了什么？
谁知道问题所在并知道解决方案？

非常感谢您的帮助！

我们尝试为 Angular 5 项目进行服务器端渲染构建，然后显示此错误。我的Zone js被加载了polyfills.ts，有什么问题如何解决。

我在 mysserver.js文件中两次观察到相同的区域代码，谢谢

我正在尝试将文件添加到 Angular 6 cli 项目中的缓存存储，但由于 zonejs 不断出现错误，我无法找出原因。如果我在没有其他代码的打字稿项目中运行，下面的代码可以正常工作。这些文件被添加到缓存中，因此该函数被执行，但随后它会引发错误。

如果我在我的角度项目中运行相同的代码，我会收到错误

错误：未捕获（在承诺中）：TypeError：给定值不是 Promise TypeError：给定值不是 Promise

请参阅此 Stackblitz以重现该错误。当您单击同步按钮时，给定文件将添加到缓存存储中，然后引发错误。

当我SCRIPT5022: SecurityError in zone.js (192,25)在 IE11 的 iframe 中加载 Angular 组件时，我会间歇性地出现问题。

除此之外，框架正在工作，我没有注意到任何损坏。

这是围绕错误的代码：

有谁知道是什么导致了这个错误？我还在 github 上发现了这个问题，看起来一样 - https://github.com/angular/zone.js/issues/1001。

I have a very strange case: After setting up a component containing a form, interacting with the form is incredibly slow. After a click on a dropdown, the form reacts only when the zone.js timeout occurs and the periodic change detection kicks in. Any idea why this could be the case? Why would a component/form be outside of the zone.js change detection? I don't have any errors.

The only debugging input I have is, that on performance profiling in chrome devtools, I get the tap event and then 5-12seconds later, zone.js triggers the UI animation of showing the dropdown options.

In the Chrome DevTools Performance Profiler, this looks like this:

I tap the dropdown around 2 seconds after profiling:

And then 10 seconds later, zone.js, does a periodic update which triggers the dropdown:

Between, nothing happens.

I'm using NgRx and the switch to the component with the form happens in an @Effect, where I call the router.

The Effect looks like this: (It wasn't working with RxJS5 either, so it shouldn't have anything to do with the migration)

The component itself looks like this:

And this is the HTML:

Please let me know what could be of importance? I'm lost.

Thanks!

从 Firefox 61.0.1 调用到 Safari 11.1.2 会导致在 Angular 5.x 应用程序中收集所有候选人后，ICE 连接失败。

该应用程序正在使用 webrtc-adapter 添加跨浏览器支持。

测试浏览器：

• 火狐 61.0.1
• 歌剧 54
• Safari 11.1.2 + 移动版 Safari
• 铬 67
• 边缘 42

平台：macOS High Sierra 10.13.6

所有其他浏览器组合都有效。

以下是来自 Firefox 的 webrtc 日志：

我p-fileUpload在Angular 6.0.0应用程序中使用，用于上传图像文件（在这种情况下是多个图像文件）。它有一个(uploadHandler)用于上传文件的事件处理程序。

e.files文件正在正确上传，但是在遍历数组时我无法生成 base64 代码，因为reader.onloadend没有触发。我已经搜索了这个触发问题并发现了一些相关问题，但它们的解决方案并没有解决我的问题。下面是我为多个图像文件上传编写的代码 -

}

请帮我解决这个问题。我在同一个应用程序中使用相同的代码上传单个图像（所以我不需要forEach在那里循环），并且它在所有其他地方都可以正常工作，与这种情况不同。