web-dev-qa-db-ja.com

Angular / AngularJSアップグレードアプリがバックグラウンドでブラウザタブに応答しない

私はAngular/AngularJSアップグレードアプリを持っており、現在AngularJSからAngularにすべてを移行中です。それはかなり大きなプロジェクトなので、私は間違いなくアップグレードの方法をとる必要があります。

@ uirouter/angular-hybridを使用し、ルート状態はまだAngularJS（ナビゲーションなど）であり、子ビューがあります。この子ビューでは、すべてのコンポーネントをゆっくりとAngularにアップグレードしています。パフォーマンス上の理由から、UpgradeModuleの代わりにdowngradeModule（）（ https://angular.io/guide/upgrade-performance ）を使用する必要がありました。

UIコンポーネントには、Angular Material2を使用します。

セットアップについてはこれだけです、質問/問題：

ページのあるタブがバックグラウンドにあり、後で（少なくとも5〜10分）ページに戻ると、ページ全体が遅れて応答しなくなります。離れている時間が長く、タブがバックグラウンドにあるほど、ラグは長くなります。

私がすでに試した/見つけたもの：

  • イベントが登録されているようですが、タブがバックグラウンドにあるため実行されませんが、タブに戻るとすべて同時に実行されます。これがプロファイリングのスクリーンショットです profiling screenshot
  • Angular変更検出を削除し、ngZone: 'noop'を使用しても効果はありません
  • すべてのアニメーションを無効にしても効果はありません
  • Angularプロダクションモードを有効にすると、少し改善されました（幻想かもしれません）が、問題は解決しません）
  • Chromeで開発していますが、他のブラウザ（Firefox、Safariなど）にも問題があります
  • ルータービューコンポーネントがAngularコンポーネントである場合にのみ発生し、AngularJSビューコンポーネントは影響を受けていないようです

私は現在、問題を再現し、さらにテストするためのコンテキストを増やすために、クリーンなサンプルアプリに取り組んでいます。すぐに追加します。

Libバージョン

角度：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

angularjsangularangular-ui-routerangular-upgrade
22
Nicolas Gehlert

すべての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 {
}

基本的にコンポーネントをdetach（）してから、手動で変更を検出します。

1
captwebdesign

タブが読み込まれるたびにサービスを破棄してから、新しいイベントを作成して新しい変更をリッスンしてみてください。

また、これは機能する可能性がありますが、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+）である必要があります。

このため、アプリはリーフの状態/ビューから移行し、ルートの状態/ビューに向かって進む必要があります。

0
captwebdesign

UrlHandlingStrateryを調べてみましたか？ AngularJSスタックの上でAngularを使用し、必要に応じてゆっくりと書き直しました。

AngularとAngularJSルーターの両方を使用し、UrlHandlingStrategyを使用して、Angularで処理するルートを決定し、ルートを処理しないかどうかを決定しました。 Angularによって処理された後、AngularJSルートに移動します。

あなたのセットアップを調べずに、私は推測することしかできません。たぶん、ルートがいつも行き来しているからでしょう

0
dK-