Приложение Angular/AngularJS Upgrade не отвечает на вкладку браузера в фоновом режиме

У меня есть приложение Angular/AngularJS Upgrade App, и я в настоящее время в процессе миграции всего от AngularJS до Angular. Это довольно большой проект, поэтому мне определенно нужно идти по пути Upgrade.

Я использую @uirouter/angular-hybrid и имею корневое состояние, которое по-прежнему является AngularJS (Navigation and stuff) и дочерним. В этом детском представлении я теперь медленно обновляю все компоненты до Angular. По соображениям производительности мне пришлось использовать downgradeModule() (https://angular.io/guide/upgrade-performance) вместо UpgradeModule.

Для компонентов пользовательского интерфейса я использую угловой материал 2.

Так много для настройки, теперь к вопросу/проблеме:

Когда вкладка со страницей находится в фоновом режиме, и вы вернетесь на страницу позже (по крайней мере от 5 до 10 минут), вся страница отстает и не отвечает. Чем дольше вы находитесь, а вкладка находится в фоновом режиме, тем дольше будет отставание.

Что я уже пробовал/узнал:

  • Кажется, что зарегистрированы события, но поскольку вкладка находится в фоновом режиме, они не выполняются, но все они выполняются одновременно, как только вы вернетесь на вкладку. Здесь снимок экрана профилирования profiling screenshot
  • Удаление обнаружения угловых изменений и использование ngZone: 'noop' не влияет
  • Отключение всех анимаций не влияет
  • Включение режима углового производства немного улучшило его (также может быть иллюзией), но проблема все еще сохраняется
  • Я разрабатываю в Chrome, проблема существует и в других браузерах (например, Firefox, Safari)
  • Только если компонент просмотра маршрутизатора является угловым компонентом, компонент просмотра AngularJS, похоже, не влияет

В настоящее время я работаю над чистым образцовым приложением, чтобы воспроизвести проблему и иметь еще несколько контекстов для дальнейшего тестирования. Я добавлю это в ближайшее время.

Варианты Lib

Угловое: 6.1.0

AngularJS: 1.7.2

zone.js: 0.8.26

@uirouter/угло-гибридный: 6.0.0

Ответ 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 {
}

Вы собираетесь отделить() компонент по существу, а затем вручную обнаружить изменения.

Ответ 2

Попробуйте утилизировать службу при каждой загрузке каждой вкладки, а затем создайте новые события, чтобы прослушивать новые изменения.

Кроме того, это может работать, но это обходное решение, рассматривающее README @https://github.com/ui-router/angular-hybrid#limitations

В этом разделе README можно предположить, что переопределение не является бесшовным вариантом:

Ограничения:

В настоящее время мы поддерживаем маршрутизацию либо угловых (2+), либо компонент AngularJS (1.x) в Uu-view AngularJS (1.x). Однако мы не поддерживаем маршрутизацию компонентов AngularJS (1.x) в угловой (2+) ui-view.

Если вы создаете угловой (2+) ui-view, то любое вложенное ui-view должно также быть угловым (2+).

Из-за этого приложения должны быть перенесены, начиная с состояний/представлений в листах и работая над корневым состоянием/представлением.

Ответ 3

Вы пытаетесь заглянуть в UrlHandlingStratery? Нам удалось использовать Angular поверх стека AngularJS и медленно перезаписывать, когда это необходимо.

Что мы сделали, так это то, что мы использовали как Angular, так и AngularJS router, используя UrlHandlingStrategy, чтобы определить, какой маршрут должен обрабатываться угловым, и если маршрут не обрабатывается Angular, он перейдет на маршрут AngularJS.

Я не могу догадаться. Может быть, потому, что маршрут все время идет туда и обратно