refactor: use router.events instead of the NgxsRouterPlugin

npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts

@@ -1,4 +1,4 @@
-import { Config, LocalizationParam, RestOccurError } from '@abp/ng.core';
+import { AuthService, LocalizationParam, RestOccurError } from '@abp/ng.core';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   ApplicationRef,
@@ -10,8 +10,8 @@ import {
   Injector,
   RendererFactory2,
 } from '@angular/core';
-import { Navigate, RouterDataResolved, RouterError, RouterState } from '@ngxs/router-plugin';
-import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
+import { NavigationError, ResolveEnd, Router } from '@angular/router';
+import { Actions, ofActionSuccessful } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import snq from 'snq';
@@ -72,7 +72,7 @@ export class ErrorHandler {
 
   constructor(
     private actions: Actions,
-    private store: Store,
+    private router: Router,
     private confirmationService: ConfirmationService,
     private appRef: ApplicationRef,
     private cfRes: ComponentFactoryResolver,
@@ -86,15 +86,18 @@ export class ErrorHandler {
   }
 
   private listenToRouterError() {
-    this.actions
-      .pipe(ofActionSuccessful(RouterError), filter(this.filterRouteErrors))
+    this.router.events
+      .pipe(
+        filter(event => event instanceof NavigationError),
+        filter(this.filterRouteErrors),
+      )
       .subscribe(() => this.show404Page());
   }
 
   private listenToRouterDataResolved() {
-    this.actions
+    this.router.events
       .pipe(
-        ofActionSuccessful(RouterDataResolved),
+        filter(event => event instanceof ResolveEnd),
         filter(() => !!this.componentRef),
       )
       .subscribe(() => {
@@ -259,11 +262,7 @@ export class ErrorHandler {
   }
 
   private navigateToLogin() {
-    this.store.dispatch(
-      new Navigate(['/account/login'], null, {
-        state: { redirectUrl: this.store.selectSnapshot(RouterState.url) },
-      }),
-    );
+    this.injector.get(AuthService).initLogin();
   }
 
   createErrorComponent(instance: Partial<HttpErrorWrapperComponent>) {
@@ -314,9 +313,9 @@ export class ErrorHandler {
     return this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === status) < 0;
   };
 
-  private filterRouteErrors = (instance: RouterError<any>): boolean => {
+  private filterRouteErrors = (navigationError: NavigationError): boolean => {
     return (
-      snq(() => instance.event.error.indexOf('Cannot match') > -1) &&
+      snq(() => navigationError.error.message.indexOf('Cannot match') > -1) &&
       this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === 404) < 0
     );
   };