refactore: error-wrapper component and create-error-comp service

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 =
+    const computedStyle = this.window.getComputedStyle(this.document.body);
-      this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') ||
+    const backgroundColor = computedStyle?.getPropertyValue('background-color');
-      '#fff';
+    this.backgroundColor = backgroundColor || '#fff';
   }
 
   ngAfterViewInit(): void {
     if (this.customComponent) {
-      const customComponentRef = this.cfRes
+      const compFactory = this.cfRes.resolveComponentFactory(this.customComponent);
-        .resolveComponentFactory(this.customComponent)
+      const customComponentRef = compFactory.create(this.injector);
-        .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();
   }
 

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
+    this.componentRef = createComponent(HttpErrorWrapperComponent, {
-      .resolveComponentFactory(HttpErrorWrapperComponent)
+      environmentInjector: this.envInjector,
-      .create(this.injector);
+    });
 
     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;