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

更新（2019年8月）

当前的Lib版本Angular 8，AngularJS 1.7.8和uirouter / hybrid 8仍在发生

Answer 1

尝试在所有ng2组件上使用此实现模式。

https://angular.io/api/core/ChangeDetectorRef#detach-change-detector-to-limit-how-often-check-occurs

这个概念是它将删除组件使其更新或由angularjs完成渲染。

从文档：

class DataListProvider {
  // in a real application the returned data will be different every time
  get data() { return [1, 2, 3, 4, 5]; }
}

@Component({
  selector: 'giant-list',
  template: `
      <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
    `,
})
class GiantList {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) {
    ref.detach();
    setInterval(() => { this.ref.detectChanges(); }, 5000);
  }
}

@Component({
  selector: 'app',
  providers: [DataListProvider],
  template: `
      <giant-list><giant-list>
    `,
})
class App {
}

您将基本上分离（）组件，然后手动检测更改。

Answer 2

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

此外，这可能有用，但考虑到README @ https://github.com/ui-router/angular-hybrid#limitations是一种解决方法

README的这一部分可能会建议降级不是一个无缝的选择：

限制：

我们目前支持将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+）。

因此，应从叶状态/视图开始迁移应用程序，并向根状态/视图进行处理。

Answer 3

您是否尝试过调查UrlHandlingStratery？ 我们设法在AngularJS堆栈之上使用Angular，并在必要时慢慢重写。

我们做的是使用Angular和AngularJS路由器，使用UrlHandlingStrategy来确定Angular将处理哪条路由，如果路由不是由Angular处理，则它将转到AngularJS路由。

没有考虑你的设置，我只能猜测。 也许是因为这条路线一直在来回走动