Angular/AngularJS Upgrade app unresponsive when browser tab in background Angular/AngularJS Upgrade app unresponsive when browser tab in background angular angular

Angular/AngularJS Upgrade app unresponsive when browser tab in background


Try utilizing this implementation pattern on all ng2 components.

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

The concept is that it would remove the component from having it's updates or rendering done by angularjs.

From the Documentation:

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

You're going to detach() the component essentially and then manually detect changes.


Try disposing of the service on each tab load, then creating new events to listen for new changes.

Also, this may work, but is a workaround considering the README @ https://github.com/ui-router/angular-hybrid#limitations

This section of the README may suggest that downgrading isn't a seamless option:

Limitations:

We currently support routing either Angular (2+) or AngularJS (1.x) components into an AngularJS (1.x) ui-view. However, we do not support routing AngularJS (1.x) components into an Angular (2+) ui-view.

If you create an Angular (2+) ui-view, then any nested ui-view must also be Angular (2+).

Because of this, apps should be migrated starting from leaf states/views and work up towards the root state/view.


Have you try looking into UrlHandlingStratery?We managed to use Angular on top of AngularJS stack and slowly re-write when necessary.

What we did was we use both Angular and AngularJS router, using UrlHandlingStrategy to determine which route is to be handled by Angular and if the route is not to be handled by Angular, it will then go to AngularJS route.

Without looking into your setup, I can only guess. Maybe because the route is going back and forth all the time that