Merge pull request #19273 from abpframework/auto-merge/rel-8-1/2573

Merge branch dev with rel-8.1

docs/en/UI/Angular/HTTP-Error-Handling.md

@@ -1,8 +1,40 @@
 # HTTP Error Handling
 
-When the `RestService` is used, all HTTP errors are reported to the [`HttpErrorReporterService`](./HTTP-Error-Reporter-Service), and then `ErrorHandler`, a service exposed by the `@abp/ng.theme.shared` package automatically handles the errors.
+### Error Configurations
+
+ABP offers a configurations for errors handling like below
+
+```ts
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { MyCustomRouteErrorComponent } from './my-custom-route.component';
+
+@NgModule({
+  imports: [
+    ThemeSharedModule.forRoot({
+      httpErrorConfig: {
+        skipHandledErrorCodes: [403],
+        errorScreen: {
+          forWhichErrors: [404],
+          component: CustomErrorComponent,
+          hideCloseIcon: false
+        }
+      }
+    }),
+    ...
+  ],
+})
+export class AppModule {}
+```
+
+- `ErrorScreenErrorCodes` the error codes that you can pass to `skipHandledErrorCodes` and `forWhichErrors`.
+- `skipHandledErrorCodes` the error codes those you don't want to handle it.
+- `errorScreen` the screen that you want to show when a route error occurs.
+  - `component` component that you want to show.
+  - `forWhichErrors` same as `ErrorScreenErrorCodes`
+  - `hideCloseIcon` hides close icon in default ABP component.
 
 ## Custom HTTP Error Handler
+When the `RestService` is used, all HTTP errors are reported to the [`HttpErrorReporterService`](./HTTP-Error-Reporter-Service), and then `ErrorHandler`, a service exposed by the `@abp/ng.theme.shared` package automatically handles the errors.
 
 ### Function Method `Deprecated`
 

docs/en/docs-nav.json

@@ -1059,7 +1059,7 @@
                       "path": "UI/Angular/HTTP-Requests.md"
                     },
                     { 
-                      "text": "HTTP Error Handling / Customization",
+                      "text": "Customize Error Handling",
                       "path": "UI/Angular/HTTP-Error-Handling.md"
                     }
                   ]

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

@@ -87,7 +87,7 @@ export class ErrorHandler {
   protected filterRestErrors = ({ status }: HttpErrorResponse): boolean => {
     if (typeof status !== 'number') return false;
 
-    if (!this.httpErrorConfig || !this.httpErrorConfig.skipHandledErrorCodes) {
+    if (!this.httpErrorConfig?.skipHandledErrorCodes) {
       return true;
     }
 

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -32,7 +32,7 @@ import { RootParams } from './models/common';
 import { DEFAULT_HANDLERS_PROVIDERS, NG_BOOTSTRAP_CONFIG_PROVIDERS } from './providers';
 import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
-import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
+import { HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 import { PasswordComponent } from './components/password/password.component';
@@ -112,11 +112,6 @@ export class ThemeSharedModule {
           useFactory: noop,
         },
         { provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
-        {
-          provide: 'HTTP_ERROR_CONFIG',
-          useFactory: httpErrorConfigFactory,
-          deps: [HTTP_ERROR_CONFIG],
-        },
         { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
         NG_BOOTSTRAP_CONFIG_PROVIDERS,
         {

npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts

@@ -1,18 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { CustomHttpErrorHandlerService, HttpErrorConfig, HttpErrorHandler } from '../models/common';
 
-export function httpErrorConfigFactory(config = {} as HttpErrorConfig) {
-  if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
-    config.errorScreen.forWhichErrors = [401, 403, 404, 500];
-  }
-
-  return {
-    skipHandledErrorCodes: [],
-    errorScreen: {},
-    ...config,
-  } as HttpErrorConfig;
-}
-
 export const HTTP_ERROR_CONFIG = new InjectionToken<HttpErrorConfig>('HTTP_ERROR_CONFIG');
 
 /**