angular 2遅延ルーティングを使用しています。クライアントは、AOT と angular-router-loader を使用して子を遅延ロードする webpack2 にバンドルされています。ブラウザが接続されている場合、すべてが期待どおりに機能します。つまり、ルーターを遅延ロードされたモジュールに正常に移動でき、チャンクが正常にロードされ、コンポーネントなどを表示できます。
ただし、切断されていることをエミュレートすると (たとえば、オフライン クロム開発者ツール オプションを使用して)、関連するチャンクを読み込めないため、予想どおりルーティングが失敗します。エラーは「チャンク [チャンク番号] の読み込みに失敗しました」
その後、ルーティングコマンドが機能しなくなり、ルーターが壊れたようです。
グローバルな ErrorHandler を使用してエラーを処理しようとしました。ルーターが壊れる前にエラーをキャッチできるかもしれないという考えでしたが、それでは手遅れのようです。エラーが発生した時点で、ルーターが機能していません。
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
@Injectable()
export class CustomErrorHandler extends ErrorHandler {
constructor(private injector: Injector) {
super(false);
}
private get router(): Router {
return this.injector.get(Router, null);
}
public handleError(error: Error) {
if (/Loading chunk [\d]+ failed/.test(error.message)) {
console.info('Offline mode');
let router = this.router;
if (router) {
router.navigateByUrl('/offline').then(t => console.debug(t+'')).catch(t=> console.debug(t));
} else {
window.location.href = '/';
}
}
}
}
「オフライン モード」メッセージが出力されるため、カスタム エラー ハンドラが機能します。インジェクションも機能し、ルーターは null ではありませんが、ルーターのナビゲーションは機能しません。ルーターの約束は解決されず、拒否されません。
私が達成しようとしているのは、エラーを処理すること (たとえば、ユーザーに有益なメッセージを表示すること) と同時に、ルーターを動作状態にして、ユーザーが後でナビゲートできるようにすることです (インターネット接続が復元されたとき)。ページ全体をリロードせずに。
更新 1: aot と webpack なしで再現しようとしています
これが角度のあるルーターの問題であるかどうかを確認するために、jit コンパイルでオフラインで作業しようとしたときに何が起こるかを確認しようとしました。私が使用したのは、angular router plunkerがログインタブに移動し、オフラインに切り替えてログインを押したことです。クライアントが管理モジュールをロードしようとしていたため、多数の「エラー: XHR エラーの読み込み中」エラーがログに記録されました。最終的にナビゲーションは失敗しましたが、その後ルーティング ナビゲーションは壊れませんでした。他のタブに移動でき、オンラインに戻った後、管理者に移動することさえできました. おそらく問題は、angular-router-loader webpack プラグインがモジュールをロードしようとする方法です。