diff --git a/docs/en/UI/Angular/HTTP-Error-Handling.md b/docs/en/UI/Angular/HTTP-Error-Handling.md
index 606211bfeb..c5d97bbe1a 100644
--- a/docs/en/UI/Angular/HTTP-Error-Handling.md
+++ b/docs/en/UI/Angular/HTTP-Error-Handling.md
@@ -1,8 +1,55 @@
 # 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.
+## Configurations for Errors
+ABP offers a configurations for errors handling. You can set these configuration in **`ThemeSharedModule.forRoot()`** method in app.module.ts
+
+See the configuration interface;
+
+```ts
+export type ErrorScreenErrorCodes = 0 | 401 | 403 | 404 | 500;
+
+export interface HttpErrorConfig {
+  skipHandledErrorCodes?: ErrorScreenErrorCodes[] | number[];  // 
+  errorScreen?: {
+    component: Type<any>;
+    forWhichErrors?: ErrorScreenErrorCodes[];
+    hideCloseIcon?: boolean;
+  };
+}
+```
+
+- **`ErrorScreenErrorCodes`** The error codes that you can pass to **`skipHandledErrorCodes`** and **`forWhichErrors`**.
+- **`skipHandledErrorCodes`** 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.
+
+### Example Usage
+```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: MyCustomRouteErrorComponent,
+          hideCloseIcon: false
+        }
+      }
+    }),
+    ...
+  ],
+})
+export class AppModule {}
+```
 
 ## 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`
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
index 30f9f7b3cb..07c5721625 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
+++ b/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;
     }
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index d2d294bfc5..c253bc023b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/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,
         {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts
index 64245680db..96d913f297 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts
+++ b/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');
 
 /**