From 9164f958adbf799c90d164fd17e07dad8b032bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=87=C4=B1rak?= <yusuf10901@hotmail.com>
Date: Mon, 25 Mar 2024 21:17:05 +0300
Subject: [PATCH 1/9] refactor: http-error-wrapper component and adding http
 error message constants

---
 .../http-error-wrapper.component.html         | 44 +++++++++----------
 .../http-error-wrapper.component.ts           | 13 ++++--
 .../src/lib/constants/default-errors.ts       | 14 ++++++
 .../theme-shared/src/lib/constants/index.ts   |  4 ++
 .../packages/theme-shared/src/public-api.ts   |  3 +-
 5 files changed, 50 insertions(+), 28 deletions(-)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
index cb3adb0e17..52056ee18c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
@@ -4,32 +4,28 @@
   class="error"
   [style.backgroundColor]="backgroundColor"
 >
-  <button
-    *ngIf="!hideCloseIcon"
-    id="abp-close-button"
-    type="button"
-    class="btn-close me-2"
-    (click)="destroy()"
-  ></button>
+  @if (!hideCloseIcon) {
+    <button id="abp-close-button" type="button" class="btn-close me-2" (click)="destroy()"></button>
+  }
 
-  <div *ngIf="!customComponent" class="row centered">
-    <div class="col-md-12">
-      <div class="error-template">
-        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
-        <div class="error-details">
-          {{ details | abpLocalization }}
-        </div>
-        <div class="error-actions">
-          <a
-            *ngIf="isHomeShow"
-            (click)="destroy()"
-            routerLink="/"
-            class="btn btn-primary btn-md mt-2"
-            ><span class="glyphicon glyphicon-home"></span>
-            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
-          </a>
+  @if (!customComponent) {
+    <div class="row centered">
+      <div class="col-md-12">
+        <div class="error-template">
+          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
+          <div class="error-details">
+            {{ details | abpLocalization }}
+          </div>
+          <div class="error-actions">
+            @if (isHomeShow) {
+              <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
+                ><span class="glyphicon glyphicon-home"></span>
+                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
+              </a>
+            }
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  }
 </div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index 7761751e8c..71566ff76c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -17,6 +17,7 @@ import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
 import { LocalizationParam, SubscriptionService } from '@abp/ng.core';
 import { ErrorScreenErrorCodes } from '../../models';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'abp-http-error-wrapper',
@@ -27,6 +28,8 @@ import { ErrorScreenErrorCodes } from '../../models';
 export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
   protected readonly document = inject(DOCUMENT);
   protected readonly window = this.document.defaultView;
+  protected readonly router = inject(Router);
+  protected readonly subscription = inject(SubscriptionService);
 
   appRef!: ApplicationRef;
 
@@ -57,11 +60,10 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
     return this.status ? `[${this.status}]` : '';
   }
 
-  constructor(private subscription: SubscriptionService) {}
-
   ngOnInit(): void {
     this.backgroundColor =
-      this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') || '#fff';
+      this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') ||
+      '#fff';
   }
 
   ngAfterViewInit(): void {
@@ -87,6 +89,11 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
     this.subscription.addOne(keyup$, () => this.destroy());
   }
 
+  goHome() {
+    this.router.navigate(['/']);
+    this.destroy();
+  }
+
   ngOnDestroy(): void {
     this.destroy();
   }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts
index 46a0605b95..6a2797e037 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts
@@ -51,3 +51,17 @@ export const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({
   high: 9,
   veryHigh: 99,
 });
+
+export const HTTP_ERROR_STATUS = {
+  '401': 'AbpUi::401Message',
+  '403': 'AbpUi::403Message',
+  '404': 'AbpUi::404Message',
+  '500': 'AbpUi::500Message',
+};
+
+export const HTTP_ERROR_DETAIL = {
+  '401': 'AbpUi::DefaultErrorMessage401Detail',
+  '403': 'AbpUi::DefaultErrorMessage403Detail',
+  '404': 'AbpUi::DefaultErrorMessage404Detail',
+  '500': 'AbpUi::DefaultErrorMessage',
+};
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts
new file mode 100644
index 0000000000..d08eba52b8
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts
@@ -0,0 +1,4 @@
+export * from './validation';
+export * from './default-errors';
+export * from './styles';
+export * from './scripts';
diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts
index 659e59e490..d5f78417ef 100644
--- a/npm/ng-packs/packages/theme-shared/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts
@@ -2,7 +2,7 @@
  * Public API Surface of theme-shared
  */
 
-export * from './lib/adapters'
+export * from './lib/adapters';
 export * from './lib/animations';
 export * from './lib/components';
 export * from './lib/constants/validation';
@@ -16,3 +16,4 @@ export * from './lib/services';
 export * from './lib/theme-shared.module';
 export * from './lib/tokens';
 export * from './lib/utils';
+export * from './lib/constants';

From 97fc5d157dabd9a2f98e5ae5961965e6e37ce69b Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Mon, 25 Mar 2024 21:27:12 +0300
Subject: [PATCH 2/9] remove: duplicated contant exports

---
 npm/ng-packs/packages/theme-shared/src/public-api.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts
index d5f78417ef..43411c916d 100644
--- a/npm/ng-packs/packages/theme-shared/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts
@@ -5,8 +5,6 @@
 export * from './lib/adapters';
 export * from './lib/animations';
 export * from './lib/components';
-export * from './lib/constants/validation';
-export * from './lib/constants/default-errors';
 export * from './lib/directives';
 export * from './lib/enums';
 export * from './lib/handlers';

From a18d48665e7919145f7b76fc37f8cf95daf19724 Mon Sep 17 00:00:00 2001
From: Sinan997 <sinanozturk997@gmail.com>
Date: Tue, 26 Mar 2024 17:58:40 +0300
Subject: [PATCH 3/9] add network status component to template

---
 .../apps/dev-app/src/app/app.module.ts        |  2 +-
 .../services/internet-connection-service.ts   | 22 ++---
 .../internet-connection-status.component.ts   | 83 +++++++++++--------
 .../app/angular/src/app/app.component.ts      |  1 +
 templates/app/angular/src/app/app.module.ts   |  3 +-
 5 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index b2dc1ba780..f144639db4 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -39,7 +39,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     AccountLayoutModule.forRoot(),
-    InternetConnectionStatusComponent
+    InternetConnectionStatusComponent,
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],
diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
index d74e65d036..5a8ad4bd63 100644
--- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
@@ -5,28 +5,28 @@ import { BehaviorSubject } from 'rxjs';
 @Injectable({
   providedIn: 'root',
 })
-export class InternetConnectionService{
-  readonly document = inject(DOCUMENT)
+export class InternetConnectionService {
+  readonly document = inject(DOCUMENT);
   readonly window = this.document.defaultView;
   readonly navigator = this.window.navigator;
 
-  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine)
+  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine);
 
   private status = signal(this.navigator.onLine);
 
-  networkStatus = computed(() => this.status())
-  
-  constructor(){
+  networkStatus = computed(() => this.status());
+
+  constructor() {
     this.window.addEventListener('offline', () => this.setStatus(false));
     this.window.addEventListener('online', () => this.setStatus(true));
   }
 
-  setStatus(val:boolean){
-    this.status.set(val)
-    this.status$.next(val)
+  setStatus(val: boolean) {
+    this.status.set(val);
+    this.status$.next(val);
   }
 
-  get networkStatus$(){
-    return this.status$.asObservable()
+  get networkStatus$() {
+    return this.status$.asObservable();
   }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
index e649555f40..928d27053a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
@@ -1,47 +1,62 @@
-import { Component, computed, inject  } from '@angular/core';
-import { NgIf } from '@angular/common'
-import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
+import { Component, inject } from '@angular/core';
+import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-internet-status',
   standalone: true,
-  imports:[NgIf, LocalizationModule],
+  imports: [LocalizationModule, NgbTooltip],
   template: `
-    <div class="status-icon" *ngIf="!isOnline()">
-      <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
-      </i>
-    </div>
-  `,
-  styles: [`
-    .blink {
-      animation: blinker 0.9s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
-    }
-    @keyframes blinker {  
-      0% { color:#c1c1c1 }
-      70% { color: #DC3545 }
-      100% { color: #DC3545 }
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top" 
+          class="fa fa-circle text-blinking blink"
+        >
+        </i>
+      </div>
     }
+  `,
+  styles: [
+    `
+      .blink {
+        animation: blinker 0.9s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+      }
+      @keyframes blinker {
+        0% {
+          color: #c1c1c1;
+        }
+        70% {
+          color: #dc3545;
+        }
+        100% {
+          color: #dc3545;
+        }
+      }
 
-    .text-blinking{
-      font-size:1.2rem;
-    }
+      .text-blinking {
+        font-size: 1.2rem;
+      }
 
-    .status-icon{
-      position: fixed;
-      z-index: 999999;
-      top: 10px;
-      right: 10px;
-    }
+      .status-icon {
+        position: fixed;
+        z-index: 999999;
+        top: 10px;
+        right: 10px;
+      }
 
-    @media (width < 768px){
-      .status-icon{
-        top: 26px;
-        right: 134px;
+      @media (width < 768px) {
+        .status-icon {
+          top: 26px;
+          right: 134px;
+        }
       }
-    }
-  `]
+    `,
+  ],
 })
-export class InternetConnectionStatusComponent{
+export class InternetConnectionStatusComponent {
   internetConnectionService = inject(InternetConnectionService);
-  isOnline = this.internetConnectionService.networkStatus
+  isOnline = this.internetConnectionService.networkStatus;
 }
diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts
index a26e745334..44a504b978 100644
--- a/templates/app/angular/src/app/app.component.ts
+++ b/templates/app/angular/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
+    <abp-internet-status></abp-internet-status>
   `,
 })
 export class AppComponent {}
diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts
index 34d59b4ec4..e09d7502fe 100644
--- a/templates/app/angular/src/app/app.module.ts
+++ b/templates/app/angular/src/app/app.module.ts
@@ -6,7 +6,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management/config
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
 import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
 import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -36,6 +36,7 @@ import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     FeatureManagementModule.forRoot(),
+    InternetConnectionStatusComponent
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],

From 30b99696b0e85cb5e1ceb0e35fda3d29fdafcfbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=87=C4=B1rak?= <yusuf10901@hotmail.com>
Date: Thu, 28 Mar 2024 14:40:56 +0300
Subject: [PATCH 4/9] Update goHome() function in
 http-error-wrapper.component.html

---
 .../http-error-wrapper/http-error-wrapper.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
index 52056ee18c..f2a887da85 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
@@ -18,7 +18,7 @@
           </div>
           <div class="error-actions">
             @if (isHomeShow) {
-              <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
+              <a (click)="goHome()" class="btn btn-primary btn-md mt-2"
                 ><span class="glyphicon glyphicon-home"></span>
                 {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
               </a>

From 05212db6b7dc45d8e59c92414d0f3176ce949c64 Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Thu, 28 Mar 2024 15:24:57 +0300
Subject: [PATCH 5/9] refactore: error-wrapper component and create-error-comp
 service

---
 .../http-error-wrapper.component.ts            | 18 ++++++++++--------
 .../services/create-error-component.service.ts | 10 +++++++---
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index 71566ff76c..618952b11a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -13,11 +13,11 @@ import {
   OnDestroy,
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Router } from '@angular/router';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
 import { LocalizationParam, SubscriptionService } from '@abp/ng.core';
 import { ErrorScreenErrorCodes } from '../../models';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'abp-http-error-wrapper',
@@ -61,19 +61,21 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
   }
 
   ngOnInit(): void {
-    this.backgroundColor =
-      this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') ||
-      '#fff';
+    const computedStyle = this.window.getComputedStyle(this.document.body);
+    const backgroundColor = computedStyle?.getPropertyValue('background-color');
+    this.backgroundColor = backgroundColor || '#fff';
   }
 
   ngAfterViewInit(): void {
     if (this.customComponent) {
-      const customComponentRef = this.cfRes
-        .resolveComponentFactory(this.customComponent)
-        .create(this.injector);
+      const compFactory = this.cfRes.resolveComponentFactory(this.customComponent);
+      const customComponentRef = compFactory.create(this.injector);
+
       customComponentRef.instance.errorStatus = this.status;
       customComponentRef.instance.destroy$ = this.destroy$;
+
       this.appRef.attachView(customComponentRef.hostView);
+
       if (this.containerRef) {
         this.containerRef.nativeElement.appendChild(
           (customComponentRef.hostView as EmbeddedViewRef<any>).rootNodes[0],
@@ -90,7 +92,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
   }
 
   goHome() {
-    this.router.navigate(['/']);
+    this.router.navigateByUrl('/');
     this.destroy();
   }
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
index 5a6f02aef9..f1d738ec12 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
@@ -2,7 +2,9 @@ import {
   ApplicationRef,
   ComponentFactoryResolver,
   ComponentRef,
+  createComponent,
   EmbeddedViewRef,
+  EnvironmentInjector,
   inject,
   Injectable,
   Injector,
@@ -24,6 +26,7 @@ export class CreateErrorComponentService {
   protected readonly cfRes = inject(ComponentFactoryResolver);
   protected readonly routerEvents = inject(RouterEvents);
   protected readonly injector = inject(Injector);
+  protected readonly envInjector = inject(EnvironmentInjector);
   protected readonly httpErrorConfig = inject(HTTP_ERROR_CONFIG);
 
   componentRef: ComponentRef<HttpErrorWrapperComponent> | null = null;
@@ -65,9 +68,9 @@ export class CreateErrorComponentService {
     const hostElement = this.getErrorHostElement();
     const host = renderer.selectRootElement(hostElement, true);
 
-    this.componentRef = this.cfRes
-      .resolveComponentFactory(HttpErrorWrapperComponent)
-      .create(this.injector);
+    this.componentRef = createComponent(HttpErrorWrapperComponent, {
+      environmentInjector: this.envInjector,
+    });
 
     for (const key in instance) {
       /* istanbul ignore else */
@@ -91,6 +94,7 @@ export class CreateErrorComponentService {
 
     const destroy$ = new Subject<void>();
     this.componentRef.instance.destroy$ = destroy$;
+
     destroy$.subscribe(() => {
       this.componentRef?.destroy();
       this.componentRef = null;

From c5b792b43e3bfa8aeda74a96a7d217907fd8aaa5 Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Thu, 28 Mar 2024 15:44:04 +0300
Subject: [PATCH 6/9] fix: navigate attempt to unauthorized page  after
 navigation to home

---
 npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts         | 2 +-
 .../http-error-wrapper/http-error-wrapper.component.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
index 6588538b28..0d9f82ea25 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
@@ -31,4 +31,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index 618952b11a..bd01e49f83 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -92,7 +92,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
   }
 
   goHome() {
-    this.router.navigateByUrl('/');
+    this.router.navigateByUrl('/', { onSameUrlNavigation: 'reload' });
     this.destroy();
   }
 

From 2cbc7c688352945e87aa793b951b052616554304 Mon Sep 17 00:00:00 2001
From: Sinan997 <sinanozturk997@gmail.com>
Date: Thu, 28 Mar 2024 15:58:04 +0300
Subject: [PATCH 7/9] Update internet connection status component icon

---
 .../internet-connection-status.component.ts   | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
index 928d27053a..9c59947891 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
@@ -13,7 +13,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
           ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
           container="body"
           placement="left-top" 
-          class="fa fa-circle text-blinking blink"
+          class="fa fa-wifi text-blinking blink"
         >
         </i>
       </div>
@@ -29,29 +29,27 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
           color: #c1c1c1;
         }
         70% {
-          color: #dc3545;
+          color: #fa2379;
         }
         100% {
-          color: #dc3545;
+          color: #fa2379;
         }
       }
 
       .text-blinking {
-        font-size: 1.2rem;
+        font-size: 30px;
       }
 
       .status-icon {
         position: fixed;
         z-index: 999999;
-        top: 10px;
-        right: 10px;
-      }
-
-      @media (width < 768px) {
-        .status-icon {
-          top: 26px;
-          right: 134px;
-        }
+        top: 50%;
+        left: 50%;
+        width: 30px;
+        text-align: center;
+        margin-left: -15px;
+        margin-top: -15px;
+        translate: transform(-50%, -50%);
       }
     `,
   ],

From 58fafb5b55f3b10c771552e8ba380db0ec9e6aeb Mon Sep 17 00:00:00 2001
From: masumulu28 <masum.ulu@hotmail.com>
Date: Thu, 28 Mar 2024 16:07:02 +0300
Subject: [PATCH 8/9] refactor: http-error-wrapper component

---
 .../http-error-wrapper.component.ts           | 42 ++++++++++---------
 .../create-error-component.service.ts         |  5 +--
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index bd01e49f83..83002a3a88 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -1,41 +1,40 @@
 import {
   ApplicationRef,
   Component,
-  Injector,
   inject,
   OnInit,
-  ComponentFactoryResolver,
   ElementRef,
   EmbeddedViewRef,
   Type,
   ViewChild,
   AfterViewInit,
   OnDestroy,
+  createComponent,
+  EnvironmentInjector,
+  DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { Router } from '@angular/router';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
-import { LocalizationParam, SubscriptionService } from '@abp/ng.core';
+import { LocalizationParam } from '@abp/ng.core';
 import { ErrorScreenErrorCodes } from '../../models';
 
 @Component({
   selector: 'abp-http-error-wrapper',
   templateUrl: './http-error-wrapper.component.html',
   styleUrls: ['http-error-wrapper.component.scss'],
-  providers: [SubscriptionService],
 })
 export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
+  protected readonly destroyRef = inject(DestroyRef);
   protected readonly document = inject(DOCUMENT);
   protected readonly window = this.document.defaultView;
   protected readonly router = inject(Router);
-  protected readonly subscription = inject(SubscriptionService);
 
   appRef!: ApplicationRef;
 
-  cfRes!: ComponentFactoryResolver;
-
-  injector!: Injector;
+  environmentInjector!: EnvironmentInjector;
 
   status: ErrorScreenErrorCodes = 0;
 
@@ -68,8 +67,9 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
 
   ngAfterViewInit(): void {
     if (this.customComponent) {
-      const compFactory = this.cfRes.resolveComponentFactory(this.customComponent);
-      const customComponentRef = compFactory.create(this.injector);
+      const customComponentRef = createComponent(this.customComponent, {
+        environmentInjector: this.environmentInjector,
+      });
 
       customComponentRef.instance.errorStatus = this.status;
       customComponentRef.instance.destroy$ = this.destroy$;
@@ -84,24 +84,26 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
       customComponentRef.changeDetectorRef.detectChanges();
     }
 
-    const keyup$ = fromEvent<KeyboardEvent>(this.document, 'keyup').pipe(
-      debounceTime(150),
-      filter((key: KeyboardEvent) => key && key.key === 'Escape'),
-    );
-    this.subscription.addOne(keyup$, () => this.destroy());
+    fromEvent<KeyboardEvent>(this.document, 'keyup')
+      .pipe(
+        debounceTime(150),
+        filter((key: KeyboardEvent) => key && key.key === 'Escape'),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(() => this.destroy());
   }
 
-  goHome() {
+  goHome(): void {
     this.router.navigateByUrl('/', { onSameUrlNavigation: 'reload' });
     this.destroy();
   }
 
-  ngOnDestroy(): void {
-    this.destroy();
-  }
-
   destroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
   }
+
+  ngOnDestroy(): void {
+    this.destroy();
+  }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
index f1d738ec12..92bafb840c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts
@@ -1,6 +1,5 @@
 import {
   ApplicationRef,
-  ComponentFactoryResolver,
   ComponentRef,
   createComponent,
   EmbeddedViewRef,
@@ -23,7 +22,6 @@ import { ErrorScreenErrorCodes } from '../models/common';
 export class CreateErrorComponentService {
   protected readonly document = inject(DOCUMENT);
   protected readonly rendererFactory = inject(RendererFactory2);
-  protected readonly cfRes = inject(ComponentFactoryResolver);
   protected readonly routerEvents = inject(RouterEvents);
   protected readonly injector = inject(Injector);
   protected readonly envInjector = inject(EnvironmentInjector);
@@ -83,9 +81,8 @@ export class CreateErrorComponentService {
     const appRef = this.injector.get(ApplicationRef);
 
     if (this.canCreateCustomError(instance.status as ErrorScreenErrorCodes)) {
-      this.componentRef.instance.cfRes = this.cfRes;
       this.componentRef.instance.appRef = appRef;
-      this.componentRef.instance.injector = this.injector;
+      this.componentRef.instance.environmentInjector = this.envInjector;
       this.componentRef.instance.customComponent = this.httpErrorConfig.errorScreen?.component;
     }
 

From 872d010d39d0f9b7afcd6ee0739b0e87dd6bb8a0 Mon Sep 17 00:00:00 2001
From: Sinan997 <sinanozturk997@gmail.com>
Date: Thu, 28 Mar 2024 16:59:28 +0300
Subject: [PATCH 9/9] add `InternetConnectionStatusComponent` to the template

---
 templates/app-nolayers/angular/src/app/app.component.ts | 1 +
 templates/app-nolayers/angular/src/app/app.module.ts    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/templates/app-nolayers/angular/src/app/app.component.ts b/templates/app-nolayers/angular/src/app/app.component.ts
index a26e745334..44a504b978 100644
--- a/templates/app-nolayers/angular/src/app/app.component.ts
+++ b/templates/app-nolayers/angular/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
+    <abp-internet-status></abp-internet-status>
   `,
 })
 export class AppComponent {}
diff --git a/templates/app-nolayers/angular/src/app/app.module.ts b/templates/app-nolayers/angular/src/app/app.module.ts
index 13d8731b67..76e5c5ddcc 100644
--- a/templates/app-nolayers/angular/src/app/app.module.ts
+++ b/templates/app-nolayers/angular/src/app/app.module.ts
@@ -6,7 +6,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management/config
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
 import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
 import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,6 +35,7 @@ import { AbpOAuthModule } from '@abp/ng.oauth';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     FeatureManagementModule.forRoot(),
+    InternetConnectionStatusComponent
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],