Merge pull request #6652 from abpframework/chore/6645

Removed the @ngxs/router-plugin dependency from @abp/ng.core package

npm/ng-packs/package.json

@@ -59,7 +59,6 @@
     "@ngx-validate/core": "^0.0.13",
     "@ngxs/devtools-plugin": "^3.7.0",
     "@ngxs/logger-plugin": "^3.7.0",
-    "@ngxs/router-plugin": "^3.7.0",
     "@ngxs/store": "^3.7.0",
     "@schematics/angular": "~10.0.5",
     "@swimlane/ngx-datatable": "^18.0.0",

npm/ng-packs/packages/core/ng-package.json

@@ -8,7 +8,6 @@
   "whitelistedNonPeerDependencies": [
     "@abp/utils",
     "@angular/localize",
-    "@ngxs/router-plugin",
     "@ngxs/store",
     "angular-oauth2-oidc",
     "just-compare",

npm/ng-packs/packages/core/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@abp/utils": "^4.0.1",
     "@angular/localize": "~10.0.10",
-    "@ngxs/router-plugin": "^3.7.0",
     "@ngxs/store": "^3.7.0",
     "angular-oauth2-oidc": "^10.0.0",
     "just-clone": "^3.1.0",

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -3,7 +3,6 @@ import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angu
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { AbstractNgModelComponent } from './abstracts/ng-model.component';
@@ -113,7 +112,6 @@ export class BaseCoreModule {}
     BaseCoreModule,
     LocalizationModule,
     NgxsModule.forFeature([ProfileState]),
-    NgxsRouterPluginModule.forRoot(),
     OAuthModule.forRoot(),
     HttpClientXsrfModule.withOptions({
       cookieName: 'XSRF-TOKEN',

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
     );
   };

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

@@ -4,7 +4,6 @@ import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Component, NgModule } from '@angular/core';
 import { NavigationError, ResolveEnd, RouterModule } from '@angular/router';
 import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest';
-import { Navigate, RouterDataResolved, RouterError } from '@ngxs/router-plugin';
 import { Actions, NgxsModule, ofActionDispatched, Store } from '@ngxs/store';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { of } from 'rxjs';
@@ -177,18 +176,7 @@ describe('ErrorHandler', () => {
     );
   });
 
-  test('should call error method of ConfirmationService when authenticated error occurs with _AbpErrorFormat header', done => {
-    spectator
-      .inject(Actions)
-      .pipe(ofActionDispatched(Navigate))
-      .subscribe(({ path, queryParams, extras }) => {
-        expect(path).toEqual(['/account/login']);
-        expect(queryParams).toBeNull();
-        expect(extras).toEqual({ state: { redirectUrl: '/x' } });
-
-        done();
-      });
-
+  test('should call error method of ConfirmationService when authenticated error occurs with _AbpErrorFormat header', () => {
     const headers: HttpHeaders = new HttpHeaders({
       _AbpErrorFormat: '_AbpErrorFormat',
     });