angularjs - page - router angular navigationend

La aplicación de actualización Angular/AngularJS no responde cuando la pestaña del navegador está en segundo plano

Question

Tengo una aplicación de actualización Angular / AngularJS y actualmente estoy en el proceso de migrar todo, desde AngularJS a Angular. Es un proyecto bastante grande, así que definitivamente necesito seguir el camino de actualización.

Utilizo el @ uirouter / angular-hybrid y tengo un estado raíz que todavía es AngularJS (Navegación y demás) y una vista secundaria. En esta vista secundaria, ahora estoy actualizando lentamente todos los componentes a Angular. Por razones de rendimiento, tuve que usar downgradeModule () ( https://angular.io/guide/upgrade-performance ) en lugar de UpgradeModule.

Para los componentes de la interfaz de usuario utilizo Angular Material 2.

Tanto para la configuración, ahora a la pregunta / problema :

Cuando la pestaña con la página está en segundo plano y regresa a la página más tarde (al menos de 5 a 10 minutos), toda la página se demora y no responde. Cuanto más tiempo esté fuera y la pestaña esté en segundo plano, más largo será el retraso.

Lo que ya probé / descubrí:

• Parece que hay eventos registrados, pero como la pestaña está en segundo plano, no se ejecutan sino que se ejecutan al mismo tiempo una vez que regresas a la pestaña. Aquí hay una captura de pantalla del perfil.
• Eliminar la detección de cambio angular y usar ngZone: ''noop'' no tiene efecto
• Deshabilitar todas las animaciones no tiene efecto
• Habilitar el modo de producción Angular lo mejoró un poco (también podría ser una ilusión) pero el problema aún persiste
• Me desarrollo en Chrome, el problema existe en otros navegadores (por ejemplo, Firefox, Safari) también
• Solo sucede si el componente de vista del enrutador es un componente angular, el componente de vista AngularJS parece no verse afectado

Actualmente estoy trabajando en una aplicación de muestra limpia para reproducir el problema y tener un poco más de contexto para realizar más pruebas. Lo agregaré pronto.

Versiones lib

Angular: 6.1.0

AngularJS: 1.7.2

zone.js: 0.8.26

@ uirouter / angular-hybrid: 6.0.0

Answer 1

¿Has intentado buscar en UrlHandlingStratery? Conseguimos usar Angular encima de la pila AngularJS y reescribimos lentamente cuando fue necesario.

Lo que hicimos fue utilizar el enrutador Angular y AngularJS, utilizando la estrategia UrlHandlingStrategy para determinar qué ruta debe ser manejada por Angular y si la ruta no debe ser manejada por Angular, entonces irá a la ruta AngularJS.

Sin mirar en su configuración, solo puedo adivinar. Tal vez porque la ruta va y viene todo el tiempo que

Answer 2

Intente deshacerse del servicio en cada carga de pestañas, luego cree nuevos eventos para escuchar los nuevos cambios.

Además, esto puede funcionar, pero es una solución alternativa considerando README @ https://github.com/ui-router/angular-hybrid#limitations

Esta sección de README puede sugerir que la degradación no es una opción perfecta:

Limitaciones:

Actualmente admitimos el enrutamiento de componentes Angular (2+) o AngularJS (1.x) en una vista ui de AngularJS (1.x). Sin embargo, no admitimos el enrutamiento de componentes AngularJS (1.x) en una vista ui Angular (2+).

Si crea una vista ui Angular (2+), entonces cualquier vista ui anidada también debe ser Angular (2+).

Debido a esto, las aplicaciones deben migrarse a partir de los estados / vistas de hoja y trabajar hacia el estado / vista raíz.

Answer 3

Intente utilizar este patrón de implementación en todos los componentes ng2.

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

El concepto es que eliminaría el componente de tener actualizaciones o renderizaciones realizadas por angularjs.

De la Documentación:

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 {
}

Vas a separar () el componente esencialmente y luego detectar cambios manualmente.