Merge pull request #1566 from abpframework/refactor/loading-and-error

Refactor/loading and error

npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts

@@ -1,33 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngxs/store';
-
-@Component({
-  selector: 'abp-error-500',
-  template: `
-    <div class="error">
-      <div class="row centered">
-        <div class="col-md-12">
-          <div class="error-template">
-            <h1>
-              Oops!
-            </h1>
-            <div class="error-details">
-              Sorry, an error has occured.
-            </div>
-            <div class="error-actions">
-              <a routerLink="/" class="btn btn-primary btn-md mt-2"
-                ><span class="glyphicon glyphicon-home"></span> Take Me Home
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['error-500.component.scss'],
-})
-export class Error500Component implements OnInit {
-  constructor(private store: Store) {}
-
-  ngOnInit(): void {}
-}

npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts

@@ -0,0 +1,45 @@
+import { Component, Renderer2, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'abp-error',
+  template: `
+    <div class="error">
+      <button id="abp-close-button mr-2" type="button" class="close" (click)="destroy()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <div class="row centered">
+        <div class="col-md-12">
+          <div class="error-template">
+            <h1>
+              {{ title }}
+            </h1>
+            <div class="error-details">
+              {{ details }}
+            </div>
+            <div class="error-actions">
+              <a routerLink="/" class="btn btn-primary btn-md mt-2"
+                ><span class="glyphicon glyphicon-home"></span> Take me home
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrls: ['error.component.scss'],
+})
+export class ErrorComponent {
+  title = 'Oops!';
+
+  details = 'Sorry, an error has occured.';
+
+  renderer: Renderer2;
+
+  elementRef: ElementRef;
+
+  host: any;
+
+  destroy() {
+    this.renderer.removeChild(this.host, this.elementRef.nativeElement);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { Actions, ofActionSuccessful } from '@ngxs/store';
 import { LoaderStart, LoaderStop } from '@abp/ng.core';
 import { filter } from 'rxjs/operators';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
+import { takeUntilDestroy } from '@ngx-validate/core';
 
 @Component({
   selector: 'abp-loader-bar',
@@ -12,7 +14,7 @@ import { filter } from 'rxjs/operators';
   `,
   styleUrls: ['./loader-bar.component.scss'],
 })
-export class LoaderBarComponent {
+export class LoaderBarComponent implements OnDestroy {
   @Input()
   containerClass: string = 'abp-loader-bar';
 
@@ -29,21 +31,31 @@ export class LoaderBarComponent {
 
   interval: any;
 
-  constructor(private actions: Actions) {
+  constructor(private actions: Actions, private router: Router) {
     actions
       .pipe(
         ofActionSuccessful(LoaderStart, LoaderStop),
         filter(this.filter),
+        takeUntilDestroy(this),
       )
       .subscribe(action => {
-        if (action instanceof LoaderStart) {
-          this.startLoading();
-        } else {
-          this.stopLoading();
-        }
+        if (action instanceof LoaderStart) this.startLoading();
+        else this.stopLoading();
+      });
+
+    router.events
+      .pipe(
+        filter(event => event instanceof NavigationStart || event instanceof NavigationEnd),
+        takeUntilDestroy(this),
+      )
+      .subscribe(event => {
+        if (event instanceof NavigationStart) this.startLoading();
+        else this.stopLoading();
       });
   }
 
+  ngOnDestroy() {}
+
   startLoading() {
     this.isLoading = true;
     const interval = setInterval(() => {

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

@@ -1,22 +1,19 @@
 import { RestOccurError } from '@abp/ng.core';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
-  Injectable,
   ApplicationRef,
   ComponentFactoryResolver,
-  RendererFactory2,
-  Inject,
-  ReflectiveInjector,
-  Injector,
   EmbeddedViewRef,
+  Injectable,
+  Injector,
+  RendererFactory2,
 } from '@angular/core';
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
+import { ErrorComponent } from '../components/errors/error.component';
 import { Toaster } from '../models/toaster';
 import { ConfirmationService } from '../services/confirmation.service';
-import { DOCUMENT } from '@angular/common';
-import { Error500Component } from '../components/errors/error-500.component';
 
 const DEFAULTS = {
   defaultError: {
@@ -71,17 +68,26 @@ export class ErrorHandler {
             );
             break;
           case 403:
-            this.showError(DEFAULTS.defaultError403.details, DEFAULTS.defaultError403.message);
+            this.createErrorComponent({
+              title: DEFAULTS.defaultError403.message,
+              details: DEFAULTS.defaultError403.details,
+            });
             break;
           case 404:
             this.showError(DEFAULTS.defaultError404.details, DEFAULTS.defaultError404.message);
             break;
           case 500:
-            this.show500Component();
+            this.createErrorComponent({
+              title: '500',
+              details: 'Sorry, an error has occured.',
+            });
             break;
           case 0:
             if ((err as HttpErrorResponse).statusText === 'Unknown Error') {
-              this.show500Component();
+              this.createErrorComponent({
+                title: 'Unknown Error',
+                details: 'Sorry, an error has occured.',
+              });
             }
             break;
           default:
@@ -116,11 +122,23 @@ export class ErrorHandler {
     );
   }
 
-  private show500Component() {
+  createErrorComponent(instance: Partial<ErrorComponent>) {
     const renderer = this.rendererFactory.createRenderer(null, null);
     const host = renderer.selectRootElement('app-root', true);
-    const componentRef = this.cfRes.resolveComponentFactory(Error500Component).create(this.injector);
+
+    const componentRef = this.cfRes.resolveComponentFactory(ErrorComponent).create(this.injector);
+
+    for (const key in componentRef.instance) {
+      if (componentRef.instance.hasOwnProperty(key)) {
+        componentRef.instance[key] = instance[key];
+      }
+    }
+
     this.appRef.attachView(componentRef.hostView);
     renderer.appendChild(host, (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]);
+
+    componentRef.instance.renderer = renderer;
+    componentRef.instance.elementRef = componentRef.location;
+    componentRef.instance.host = host;
   }
 }

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

@@ -7,7 +7,7 @@ import { ToastModule } from 'primeng/toast';
 import { forkJoin } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { Error500Component } from './components/errors/error-500.component';
+import { ErrorComponent } from './components/errors/error.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { ToastComponent } from './components/toast/toast.component';
@@ -41,9 +41,9 @@ export function appendScript(injector: Injector) {
       targetSelector: '.form-group',
     }),
   ],
-  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, Error500Component, LoaderBarComponent],
+  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, ErrorComponent, LoaderBarComponent],
   exports: [NgbModalModule, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
-  entryComponents: [Error500Component],
+  entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
   static forRoot(): ModuleWithProviders {