Redoc error handler refactor

lib/components/Redoc/redoc-initial-styles.scss

@@ -1,15 +1,18 @@
 @import url('//fonts.googleapis.com/css?family=Roboto:300,400,700');
 @import url('//fonts.googleapis.com/css?family=Montserrat:400,700');
 
-redoc.loading {
+:host.loading {
   position: relative;
   display: block;
-  min-height:350px;
+  min-height: 350px;
 }
 
 @keyframes rotate {
-  0% {transform: rotate(0deg)}
-  100% {transform: rotate(360deg)}
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 redoc.loading:before {
@@ -51,20 +54,3 @@ redoc.loading:after {
 redoc.loading-remove:before, redoc.loading-remove:after {
   opacity: 0;
 }
-
-.redoc-error {
-  padding: 20px;
-  text-align: center;
-  color: #cc0000;
-
-  > h2 {
-    color: #cc0000;
-    font-size: 40px;
-  }
-}
-
-.redoc-error-details {
-  max-width: 750px;
-  margin: 0 auto;
-  font-size: 18px;
-}

lib/components/Redoc/redoc.html

@@ -1,6 +1,6 @@
 <div class="redoc-error" *ngIf="error">
   <h1>Oops... ReDoc failed to render this spec</h1>
-  <div class='redoc-error-details'>{{_error.message}}</div>
+  <div class='redoc-error-details'>{{error.message}}</div>
 </div>
 <div class="redoc-wrap" *ngIf="specLoaded && !error">
   <div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">

lib/components/Redoc/redoc.scss

@@ -256,3 +256,19 @@ footer {
         font-weight: bold;
     }
 }
+
+.redoc-error {
+  padding: 20px;
+  text-align: center;
+  color: #cc0000;
+  > h2 {
+    color: #cc0000;
+    font-size: 40px;
+  }
+}
+
+.redoc-error-details {
+  max-width: 750px;
+  margin: 0 auto;
+  font-size: 18px;
+}

lib/components/Redoc/redoc.ts

@@ -82,8 +82,14 @@ export class Redoc extends BaseComponent implements OnInit {
 
   ngOnInit() {
     this.appState.error.subscribe(_err => {
+      // do not show errors that occuered after spec has been already loaded
+      // TODO: change this in future to show in e.g. popup
+      //if (this.specLoaded) return;
+
+      setTimeout(() => {
         this.error = _err;
-      this.changeDetector.detectChanges();
+        this.changeDetector.detectChanges()
+      });
     })
 
     if (this.specUrl) {

lib/utils/custom-error-handler.ts

@@ -2,11 +2,12 @@ import { ErrorHandler, Injectable } from '@angular/core';
 import { AppStateService } from '../services/app-state.service';
 
 @Injectable()
-export class CustomErrorHandler implements ErrorHandler {
+export class CustomErrorHandler extends ErrorHandler {
   constructor(private appState: AppStateService) {
+    super(true);
   }
   handleError(error) {
-    console.log(error);
     this.appState.error.next(error);
+    super.handleError(error);
   }
 }