Angular/AngularJS升级应用程序在后台浏览器选项卡时无响应

Question

我有一个Angular/AngularJS升级应用程序,目前正在将所有内容从AngularJS迁移到Angular.这是一个相当大的项目,所以我绝对需要采用升级方式.

我使用@ uirouter/angular-hybrid并且具有仍然是AngularJS(导航和东西)的根状态和子视图.在这个子视图中,我现在正在慢慢地将所有组件升级到Angular.出于性能原因,我不得不使用downgradeModule()(https://angular.io/guide/upgrade-performance)而不是UpgradeModule.

对于UI组件,我使用Angular Material 2.

这么多的设置,现在问题/问题:

当带有页面的选项卡在后台并且您稍后返回该页面时(至少5到10分钟),整个页面都会滞后并且没有响应.您离开的时间越长,标签位于背景中,滞后时间越长.

我已经尝试/发现的内容:

• 似乎已经注册了事件,但由于选项卡在后台,因此它们不会被执行,但是一旦您返回选项卡,它们就会同时执行.这是分析的屏幕截图
• 删除角度变化检测和使用ngZone: 'noop'无效
• 禁用所有动画无效
• 启用Angular生产模式可以稍微改善它(也可能是幻觉),但问题仍然存在
• 我在Chrome中开发,其他浏览器(例如Firefox,Safari)也存在问题
• 仅当路由器视图组件是Angular组件时才会发生,AngularJS视图组件似乎不受影响

我目前正在开发一个干净的示例应用程序来重现问题,并为进一步测试提供更多背景信息.我很快就会添加它.

Lib版本

Angular:6.1.0

AngularJS:1.7.2

zone.js:0.8.26

@ uirouter/angular-hybrid:6.0.0

Answer 1

尝试在每个选项卡加载时处理该服务，然后创建新事件以侦听新更改。

另外，这可能有效，但考虑到自述文件@ https://github.com/ui-router/angular-hybrid#limitations ，这是一种解决方法

自述文件的这一部分可能表明降级不是一个无缝的选择：

限制：

我们目前支持将 Angular (2+) 或 AngularJS (1.x) 组件路由到 AngularJS (1.x) ui-view 中。但是，我们不支持将 AngularJS (1.x) 组件路由到 Angular (2+) ui-view 中。

如果您创建 Angular (2+) ui-view，则任何嵌套 ui-view 也必须是 Angular (2+)。

因此，应用程序应该从叶状态/视图开始迁移，并逐步向根状态/视图迁移。