Приложение 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 минут), вся страница отстает и не отвечает. Чем дольше вы находитесь, а вкладка находится в фоновом режиме, тем дольше будет отставание.
Что я уже пробовал/узнал:
- Кажется, что зарегистрированы события, но поскольку вкладка находится в фоновом режиме, они не выполняются, но все они выполняются одновременно, как только вы вернетесь на вкладку. Здесь снимок экрана профилирования
- Удаление обнаружения угловых изменений и использование
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.
Я не могу догадаться. Может быть, потому, что маршрут все время идет туда и обратно