问题标签 [zonejs]

我有一个用 Typescript 编写的 Angular 2.45 项目。我在我的应用程序的路由模块中添加了一个新组件，并且还导入了新组件。

当我启动应用程序时，我收到以下错误：

这是我在我的应用程序路由模块中所做的：

在我的 AppModule 中，我将 Component 和 RoutingModule 添加到了我的 AppModule 的声明和导入数组中。

对于我的所有其他组件，这完全符合预期。Angular 找到组件，注入所需的一切并正确路由。

但是 NewComponent 根本不起作用。关于可能是什么原因的任何想法？

在我的 Angular 2 应用程序中，我有一个解析守卫，它尝试 xhr 并在失败时抛出自定义错误：

MyError只是以下的扩展Error：

我的全局错误处理程序收到一个实例，ZoneAwareError而不是MyError：

真的error应该被包裹ZoneAwareError吗？我如何打开它才能MyError回来？依赖error.rejection房产安全吗？（因为我可以看到MyError那里）。

=== 编辑：

好的，我刚刚发现 Angular 将错误包装在不同的子类型中Error，而不仅仅是ZoneAwareError. 到目前为止，我有这个功能来解开它们，但感觉有点 hacky：

我想渲染一个视觉倒数计时器。我正在使用这个组件https://github.com/crisbeto/angular-svg-round-progressbar，它依赖于SimpleChange传递changes.current.previousValue& changes.current.currentValue。

这是模板代码

我正在使用此代码来触发angular2更改检测

更新 （经过大量测试，我发现问题不是我渲染时间的精度，这个问题已经改变以反映这一点。）

问题是ngFor在 1 个变化检测循环内被多次调用。无论我的刻度间隔或精度snapshot.remaining（即秒或十分之一秒）如果在更改检测期间snapshot.remaining的后续调用中ngFor发生更改，我都会收到异常：

Expression has changed after it was checked

如果我只渲染一个计时器而不使用，ngFor那么更改检测工作正常——即使间隔为10ms.

如何在页面上呈现多个计时器，大概使用ngFor，而不触发此异常？

解决方案

经过一番测试，似乎问题在于使用SnapshotPipewithngFor来捕获 Timer 数据的快照。最终起作用的是snapshot在 View Component 中获取 Timer 数据。正如下面的答案中提到的，这使用一种pull方法来获取更改，而不是一种push方法。

我在这里有一个 Plunkr 演示问题：https ://plnkr.co/edit/e5OVhuWtyStxI1vvXd9h

总结是：

我有一个父子组件。Child 已将更改检测策略设置为 onPush。

Child的模板就是这样的：

为什么当我单击按钮时一切正常，而更改实际上反映在视图中？（即从hi变为goodbye）

我认为事件的顺序是：

1. 用户点击按钮
2. “hello”类属性现在指向“goodbye”字符串
3. onTurnDone()zone 事件被调用，Angular 开始从根执行更改检测
4. 在根上时，它注意到所有子输入都没有更改，并且因为它的更改检测策略设置为 onPush，所以它停在那里并且不在子进程中运行更改检测
5. 模板中的{{hello}}未更新为goodbye，仍显示旧的hi

我的上述推理哪里出错了？为什么会ngDoCheck()被调用？

这里提到的 Angular 2 的变更检测是什么？ZoneJS 如何在 Angular 2 中做到这一点。

更新：当您说“更改检测”时，您是什么意思？是检测数据还是 DOM 元素的变化？

我开发了一个使用 Angular CLI 构建的简单 Angular 应用程序，该应用程序旨在嵌入到第三方网站中。它在生产模式下的演示站点上运行良好。

但是，当应用程序包含在Squarespace上运行的网站中时，我收到以下错误：

我确保我打包的 Angular 应用程序脚本只包含一次。

我只能假设 Squarespace CMS 出于某种原因已经在其脚本中包含了 Zone.js 库？

我怎样才能防止这种冲突？当然，必须可以与可能使用 Zone.js 依赖项的其他脚本一起运行 Angular2 应用程序？

如果有人能对此有所了解，那将不胜感激。

运行：Angular @ 2.4.0 zone.js @ 0.7.7

谢谢！

在将一个基于 Angular2+Polymer1 的大型客户端项目从 Angular2 beta 升级到稳定版之后，我注意到 Angular 的(eventname)DOM 属性在使用 Safari 时会触发NgZone之外的函数，以及 RxJS 的回调 ( subscribe, map)。

这是一个问题，因为这意味着我必须使用仅针对 Safari 用户（iOS 和桌面）的调用来包装每个更改模板绑定变量的函数NgZone.run()，否则 Safari 用户（+ iPhone）必须通过随机单击来触发更改检测事件屏幕。

在 Chrome 上，函数在 NgZone 内部调用（通过执行验证NgZone.isInAngularZone()）。

是否为 Safari 提供了更优雅的解决方案（除了用 包装所有调用NgZone.run()）？

上传了一个示例以重现此问题（Angular2 + Polymer）。 https://github.com/aabluedragon/safari-ngzone-issue

更新（2017 年 11 月 3 日）

我设法解决了这两个问题之一 -(domevents)在 NgZone 之外，通过将 polyfill 包含webcomponentsjs在index.html而不是angular-cli.json'sscripts:[]部分中。普通复制粘贴：<script src="static/bower_components/webcomponentsjs/webcomponents-loader.js"></script>.

但是Http.post回调仍然在外部调用NgZone，尽管我注意到如果我简单地删除 webcomponentsjs polyfill，回调将在 NgZone 内执行！

现在这个问题只有在我必须使用 webcomponents 时才会发生<=0.7.24，因为这是 Polymer1 所依赖的。但是我尝试使用 webcomponents 1.0.0-rc.6，然后问题就消失了，RxJS 回调在 NgZone 中！但随后聚合物 1 元素（例如纸元素）不起作用，所以我仍然没有解决方案。

相应地更新了 github 中的项目示例。

在github上提交了一个问题： https ://github.com/angular/zone.js/issues/671

在 Chrome 中，一切正常，但在 Firefox 中，绑定永远不会更新。

似乎问题与core-js和/或有关zone.js：

• https://github.com/AngularClass/angular2-webpack-starter/issues/709
• https://github.com/angular/angular/issues/9385

这些问题已修复，但我使用的是最新版本的 angular ( v2.4.9) 并且它不起作用。

我导入polyfill.ts，即：

在main.ts. 我尝试按照其中一张 Github 票证中的建议将导入放在zone.js导入之前core-js，但它不起作用。

我需要在我的 中包含或链接另一个 polyfillindex.html吗？

编辑#1

看起来它实际上有 50% 的时间在 Firefox 中工作。如果我刷新页面，它将每隔一次正确呈现页面。当它不起作用时，绝对没有绑定起作用；不执行事件回调，{{ ... }}不呈现绑定等。

编辑#2

这个错误实际上是由我在 index.html 中链接的Polymer 的 platform.js （Polymer 的 polyfills）引起的。如果我删除它，绑定将再次开始工作。我在我的应用程序中实现了这个Midi 合成器，它使用 Polymer，它需要platform.js. 所以看来Firefoxplatform.js和 Angular2之间存在冲突。有没有办法解决这个冲突？

我正在根据角度 1 重写应用程序到角度 2。在我的应用程序中有 websockets。每次当应用程序从 websocket 获取消息时，它都会运行zone.runTask（因为websocket.onmessage是异步函数），最后它会$digest从 angular1 更新圆。这是正常行为。但是应用程序每秒获得约 3000 条 websocket 消息，并以每秒 3000 次循环zonejs运行，$digest它会破坏性能直至冻结。

我想websocket.onmessage从zonejs控制中排除，等到所有消息都被下载然后zonejs使用setTimeout函数运行。

所以我的问题是：有没有办法排除websocket.onmessage控制zonejs？或者如何在websocket.onmessage没有猴子修补的情况下恢复标准行为zonejs？

不建议直接将 Bootstrap 与 React 一起使用，因为 Bootstrap 的 JavaScript 可能会直接改变 DOM，从而干扰 React 的 Virtual DOM 系统。有人可以对 Angular (2+) 说同样的话吗？