Как обрабатывать angular2 ленивый отказ маршрута загрузки

Ответ 1

Я получал эту ошибку каждый раз, когда выгуливал собаку и пытался проверить мой сайт в лифте. Удивило, что нет лучшей документации для обработки ошибок - и особенно всеми не решениями в проблеме github.

С учетом сказанного, есть событие NavigationError от маршрутизатора. Таким образом, вы можете перехватить это, предотвратить запуск обычного обработчика ошибок и показать всплывающее окно. Хорошая вещь об этом событии состоит в том, что он содержит полный предпринятый URL - вместо бесполезной ошибки Error: Uncaught (in promise): Error: Loading chunk common failed..

Итак, вот что я придумала.

В app.component.ts (необходимо ввести private router: Router)

Вызовите функцию initErrorHandler() из вашего конструктора.

// filter router events of type NavigationError
navigationError$ = this.router.events.pipe
                   (filter((e): e is NavigationError => e instanceof NavigationError));

// Keep a reference to the error handled, so we can ignore it later
_errorHandled: any;
initErrorHandler()
{
   this.navigationError$.subscribe((evt) => 
   {
       let showPopup = false;

       // handle known error messages that can be retried
       if (evt.error.message.startsWith('Loading chunk')) 
       {
           showPopup = true;
       }
       else 
       {
          debugger;   // consider handling other messages
       }

       if (showPopup) {

          // display a popup however you want...
          // I use Angular Material, and popup is MY OWN dialog box service
          this.popup.showChoicesDialog({

              title: 'Network Error',
              desc: 'Sorry we were unable to load that page',
              fullscreen: true,

              choices: [
                  {
                      action: () => 
                      {
                          // this is the important part - retry URL
                          this.router.navigateByUrl(evt.url)
                      },
                      buttonText: 'Retry'
                  }
              ]
          });

          // mark the error as handled to avoid global handler
          this._errorHandled = evt.error;
      }

      // normal global error handler
      this.zone.onError.subscribe((error: any) => 
      {
          // ignore errors that were already handled but couldn't be cancelled
          if (error.rejection === this._errorHandled)
          {
              this._errorHandled = undefined;
              return;
          }

          // Whatever you want to do here for true unhandled errors
          console.warn(error); 
      });
  }

В зависимости от вашей пользовательской базы вам нужно изменить сообщение и поведение, но общий подход, похоже, работает.

Я еще не знаю всего возможного NavigationError, поэтому сейчас он просто обрабатывает ошибки Loading chunk. Пожалуйста, прокомментируйте, если вы обнаружите альтернативные сообщения об ошибках.

При тестировании обязательно используйте режим "Оффлайн". В быстром тестировании, если я включаю режим "Автономно", чтобы вызвать ошибку, то попробуйте снова выполнить навигацию, она действительно успешно перемещается после отключения "Автономно".

Примечание. Многие темы для обсуждения о "чанках" связаны с проблемами кэширования после нового развертывания. Я еще не рассмотрел эти проблемы, но, скорее всего, сообщение об ошибке будет отличаться, так что вы могли бы показать другое всплывающее окно.

Ответ 2

Предотвратите сбой маршрутизации, а не обрабатывайте его.

Вы можете предварительно загрузить ваши лениво загруженные модули, чтобы они загружались на клиент после того, как браузер обнаружит неактивность, таким образом, они будут доступны в автономном режиме.

Отметьте здесь, чтобы предварительно загрузить все модули: PreloadAllModules

Вы также можете создать собственную стратегию загрузки и предварительно загружать только выбранные модули:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';
import { PreloadingStrategy, Route } from '@angular/router';

export class CustomPreloading implements PreloadingStrategy {

   public preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
     if (route.data && route.data.preload) {
       return Observable.of(true).flatMap((_: boolean) => fn());
     } else {
       return Observable.of(false);
     }
   }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomPreloading } from './custom-preloading';

const routes: Routes = [
  { ..other paths.. },
  { path: 'lazy', loadChildren: 'app/lazy/lazy.module#LazyModule', data: { preload: true }  }
];

export const appRoutingProviders = [
   CustomPreloading
];

@NgModule({
   imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloading })],
   exports: [RouterModule]
})
export class AppRoutingModule { }