Do spec load after bootstrap

lib/components/Redoc/redoc.html

@@ -1,4 +1,4 @@
-<div class="redoc-wrap">
+<div class="redoc-wrap" *ngIf="specLoaded">
   <div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">
       <api-logo> </api-logo>
       <side-menu> </side-menu>

lib/components/Redoc/redoc.ts

@@ -1,6 +1,7 @@
 'use strict';
 
-import { ElementRef, ComponentRef, AfterViewInit, Component, ChangeDetectionStrategy} from '@angular/core';
+import { ElementRef, ComponentRef, ChangeDetectorRef, Input,
+  Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
 
 import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter';
 import { BaseComponent } from '../base';
@@ -16,31 +17,32 @@ import { OptionsService, RedocEventsService } from '../../services/index';
   styleUrls: ['./redoc.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class Redoc extends BaseComponent implements AfterViewInit {
+export class Redoc extends BaseComponent implements OnInit {
   static appRef: ComponentRef<any>;
   static _preOptions: any;
+  specLoaded: boolean;
 
   public options: any;
 
   private element: any;
 
-  static showLoadingAnimation() {
-    let elem = DOM.query('redoc');
-    DOM.addClass(elem, 'loading');
+  @Input() specUrl: string;
+
+  // TODO: refactor in separate component/service
+  showLoadingAnimation() {
+    DOM.addClass(this.element, 'loading');
   }
 
-  static hideLoadingAnimation() {
-    let redocEl = DOM.query('redoc');
-    if (!redocEl) return;
-    DOM.addClass(redocEl, 'loading-remove');
+  hideLoadingAnimation() {
+    DOM.addClass(this.element, 'loading-remove');
     setTimeout(() => {
-      DOM.removeClass(redocEl, 'loading-remove');
-      DOM.removeClass(redocEl, 'loading');
+      DOM.removeClass(this.element, 'loading-remove');
+      DOM.removeClass(this.element, 'loading');
     }, 400);
   }
 
-  static displayError(err) {
-    let redocEl = DOM.query('redoc');
+  static displayError(err, elem?) {
+    let redocEl = elem || DOM.query('redoc');
     if (!redocEl) return;
     let heading = 'Oops... ReDoc failed to render this spec';
     let details = err.message;
@@ -51,10 +53,10 @@ export class Redoc extends BaseComponent implements AfterViewInit {
   }
 
   constructor(specMgr: SpecManager, optionsMgr:OptionsService, elementRef:ElementRef,
-    public events:RedocEventsService) {
+    public events:RedocEventsService, private changeDetector: ChangeDetectorRef) {
     super(specMgr);
     // merge options passed before init
-    optionsMgr.options = Redoc._preOptions;
+    optionsMgr.options = Redoc._preOptions || {};
     this.element = elementRef.nativeElement;
     //parse options (top level component doesn't support inputs)
     optionsMgr.parseOptions( this.element );
@@ -62,12 +64,27 @@ export class Redoc extends BaseComponent implements AfterViewInit {
     if (scrollParent === DOM.defaultDoc().body) scrollParent = window;
     optionsMgr.options.$scrollParent = scrollParent;
     this.options = optionsMgr.options;
-    this.events = events;
   }
 
-  ngAfterViewInit() {
-    setTimeout( () => {
+  load() {
+    this.showLoadingAnimation();
+    SpecManager.instance().load(this.options.specUrl).then(() => {
+      this.specLoaded = true;
+      this.changeDetector.markForCheck();
+      //this.changeDetector.detectChanges();
       this.events.bootstrapped.next({});
-    });
+      this.hideLoadingAnimation();
+    }).catch((err) => {
+      this.hideLoadingAnimation();
+      Redoc.displayError(err, this.element);
+      throw err;
+    })
+  }
+
+  ngOnInit() {
+    if (this.specUrl) {
+      this.options.specUrl = this.specUrl;
+    }
+    this.load();
   }
 }

lib/index.ts

@@ -29,18 +29,11 @@ export function init(specUrl:string, options:any = {}) {
 
   Redoc._preOptions = options;
   options.specUrl = options.specUrl || specUrl;
-
-  Redoc.showLoadingAnimation();
-  return SpecManager.instance().load(specUrl)
-  .then(() => {
-    return bootstrapRedoc();
-  })
+  return bootstrapRedoc()
   .then(appRef => {
-    Redoc.hideLoadingAnimation();
     moduleRef = appRef;
     console.log('ReDoc initialized!');
   }).catch(err => {
-    Redoc.hideLoadingAnimation();
     Redoc.displayError(err);
     throw err;
   });

lib/redoc.module.ts

@@ -21,7 +21,10 @@ import { SpecManager } from './utils/SpecManager';
     MenuService,
     WarningsService,
     OptionsService
-  ]
+  ],
+  exports: [Redoc]
 })
 export class RedocModule {
 }
+
+export { Redoc, SpecManager };

lib/utils/SpecManager.ts

@@ -30,10 +30,14 @@ export class SpecManager {
 
       JsonSchemaRefParser.bundle(url, {http: {withCredentials: false}})
       .then(schema => {
+        try {
           this._url = url;
           this._schema = schema;
           this.init();
-          return resolve(this._schema);
+          resolve(this._schema);
+        } catch(err) {
+          reject(err);
+        }
       }, err => reject(err));
     });