From 379870a1b3dbb028c17d879618c060afe41c6bc2 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Mon, 22 Aug 2016 12:12:13 +0300
Subject: [PATCH] Migrate to angular rc.5

---
 build/tasks/build.js                          |   2 +-
 karma.conf.js                                 |   2 +
 lib/components/ApiInfo/api-info.ts            |   9 +-
 lib/components/ApiLogo/api-logo.ts            |   9 +-
 .../JsonSchema/json-schema-lazy.spec.ts       |  14 +-
 lib/components/JsonSchema/json-schema-lazy.ts |  51 ++--
 lib/components/JsonSchema/json-schema.html    |   2 +-
 lib/components/JsonSchema/json-schema.spec.ts |   2 +-
 lib/components/JsonSchema/json-schema.ts      |  23 +-
 lib/components/Method/method.ts               |  21 +-
 lib/components/MethodsList/methods-list.ts    |  17 +-
 lib/components/ParamsList/params-list.ts      |  11 +-
 lib/components/Redoc/redoc.spec.ts            | 237 +++++++++---------
 lib/components/Redoc/redoc.ts                 |  97 +------
 .../RequestSamples/request-samples.ts         |  30 +--
 .../ResponsesList/responses-list.ts           |  15 +-
 .../ResponsesSamples/responses-samples.ts     |  12 +-
 lib/components/SchemaSample/schema-sample.ts  |  16 +-
 lib/components/SideMenu/side-menu.html        |   2 +-
 lib/components/SideMenu/side-menu.spec.ts     |   2 +-
 lib/components/SideMenu/side-menu.ts          |   8 +-
 lib/components/Warnings/warnings.ts           |   8 +-
 lib/components/base.ts                        |  58 +----
 lib/components/index.ts                       |  35 ++-
 lib/index.js                                  |  58 ++++-
 lib/redoc.module.ts                           |  31 +++
 lib/shared/components/DropDown/drop-down.ts   |   2 -
 lib/shared/components/Tabs/tabs.ts            |   3 -
 lib/shared/components/Zippy/zippy.spec.ts     |   1 -
 lib/shared/components/Zippy/zippy.ts          |   5 +-
 lib/shared/components/index.ts                |  16 +-
 lib/utils/SpecManager.ts                      |   2 +-
 lib/utils/pipes.ts                            |   4 +
 package.json                                  |  25 +-
 system.config.js                              |  51 ++--
 tests/setup.ts                                |  48 ++--
 36 files changed, 430 insertions(+), 499 deletions(-)
 create mode 100644 lib/redoc.module.ts

diff --git a/build/tasks/build.js b/build/tasks/build.js
index ec122a9e..5581575d 100644
--- a/build/tasks/build.js
+++ b/build/tasks/build.js
@@ -115,7 +115,7 @@ gulp.task('bundle', ['injectVersionFile'], function bundle(done) {
   builder
     .buildStatic(path.join(paths.tmp, paths.sourceEntryPoint),
       outputFileName,
-      { format:'umd', sourceMaps: !argv.prod, lowResSourceMaps: true, minify: argv.prod }
+      { format:'umd', sourceMaps: !argv.prod, lowResSourceMaps: true, minify: argv.prod, globalName: 'Redoc' }
     )
     .then(() => {
       // wait some time to allow flush
diff --git a/karma.conf.js b/karma.conf.js
index e7c94a7a..b0900e8d 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -40,6 +40,8 @@ module.exports = function (config) {
         files: [
           'node_modules/zone.js/dist/zone.js',
           'node_modules/zone.js/dist/async-test.js',
+          'node_modules/zone.js/dist/sync-test.js',
+          'node_modules/zone.js/dist/proxy-zone.js',
           'node_modules/zone.js/dist/jasmine-patch.js',
           'node_modules/zone.js/dist/long-stack-trace-zone.js',
           'node_modules/babel-polyfill/dist/polyfill.js',
diff --git a/lib/components/ApiInfo/api-info.ts b/lib/components/ApiInfo/api-info.ts
index 395e82ed..c63b5a10 100644
--- a/lib/components/ApiInfo/api-info.ts
+++ b/lib/components/ApiInfo/api-info.ts
@@ -1,12 +1,13 @@
 'use strict';
-
-import { SpecManager, RedocComponent, BaseComponent } from '../base';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { SpecManager, BaseComponent } from '../base';
 import { OptionsService, MenuService } from '../../services/index';
 
-@RedocComponent({
+@Component({
   selector: 'api-info',
   styleUrls: ['./api-info.css'],
-  templateUrl: './api-info.html'
+  templateUrl: './api-info.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ApiInfo extends BaseComponent {
   info: any;
diff --git a/lib/components/ApiLogo/api-logo.ts b/lib/components/ApiLogo/api-logo.ts
index 4127fbe6..5bf0dec3 100644
--- a/lib/components/ApiLogo/api-logo.ts
+++ b/lib/components/ApiLogo/api-logo.ts
@@ -1,11 +1,12 @@
 'use strict';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseComponent, SpecManager } from '../base';
 
-import {RedocComponent, BaseComponent, SpecManager} from '../base';
-
-@RedocComponent({
+@Component({
   selector: 'api-logo',
   styleUrls: ['./api-logo.css'],
-  templateUrl: './api-logo.html'
+  templateUrl: './api-logo.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ApiLogo extends BaseComponent {
   logo:any = {};
diff --git a/lib/components/JsonSchema/json-schema-lazy.spec.ts b/lib/components/JsonSchema/json-schema-lazy.spec.ts
index 736823f5..f5052ba3 100644
--- a/lib/components/JsonSchema/json-schema-lazy.spec.ts
+++ b/lib/components/JsonSchema/json-schema-lazy.spec.ts
@@ -23,15 +23,11 @@ describe('Redoc components', () => {
       fixture = builder.createSync(TestAppComponent);
       let debugEl = getChildDebugElement(fixture.debugElement, 'json-schema-lazy');
       component = <JsonSchemaLazy>debugEl.componentInstance;
-      spyOn(component, '_loadAfterSelf').and.callThrough();
-      spyOn(component.resolver, 'resolveComponent').and.returnValue({ then: () => {
-        return { catch: () => {/**/} };
-      }});
+      spyOn(component, '_loadAfterSelf').and.stub();
     });
 
     afterEach(() => {
       component._loadAfterSelf.and.callThrough();
-      component.resolver.resolveComponent.and.callThrough();
     });
 
     it('should init component', () => {
@@ -44,14 +40,6 @@ describe('Redoc components', () => {
       component.load();
       expect(component._loadAfterSelf).toHaveBeenCalled();
     });
-
-    it('should not run loadNextToLocation if already loaded', () => {
-      component.pointer = '#/def';
-      fixture.detectChanges();
-      component.load();
-      component.load();
-      expect(component._loadAfterSelf.calls.count()).toEqual(1);
-    });
   });
 });
 
diff --git a/lib/components/JsonSchema/json-schema-lazy.ts b/lib/components/JsonSchema/json-schema-lazy.ts
index 0dbc137a..edbea22f 100644
--- a/lib/components/JsonSchema/json-schema-lazy.ts
+++ b/lib/components/JsonSchema/json-schema-lazy.ts
@@ -1,8 +1,7 @@
 'use strict';
 
 import { Component, ElementRef, ViewContainerRef, OnDestroy, Input,
-  AfterViewInit, ComponentResolver, Renderer } from '@angular/core';
-import { CORE_DIRECTIVES } from '@angular/common';
+  AfterViewInit, ComponentFactoryResolver, Renderer } from '@angular/core';
 
 import { JsonSchema } from './json-schema';
 import { OptionsService } from '../../services/options.service';
@@ -12,8 +11,8 @@ var cache = {};
 
 @Component({
   selector: 'json-schema-lazy',
-  template: '',
-  directives: [CORE_DIRECTIVES]
+  entryComponents: [ JsonSchema ],
+  template: ''
 })
 export class JsonSchemaLazy implements OnDestroy, AfterViewInit {
   @Input() pointer: string;
@@ -26,7 +25,7 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit {
   disableLazy: boolean = false;
   loaded: boolean = false;
   constructor(private specMgr:SpecManager, private location:ViewContainerRef, private elementRef:ElementRef,
-    private resolver:ComponentResolver, private optionsService:OptionsService, private _renderer: Renderer) {
+    private resolver:ComponentFactoryResolver, private optionsService:OptionsService, private _renderer: Renderer) {
       this.disableLazy = this.optionsService.options.disableLazySchemas;
   }
 
@@ -36,19 +35,14 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit {
   }
 
   _loadAfterSelf() {
+    var componentFactory = this.resolver.resolveComponentFactory(JsonSchema);
+    let contextInjector = this.location.parentInjector;
+    let compRef = this.location.createComponent(componentFactory, null, contextInjector, null);
+    this.initComponent(compRef.instance);
+    this._renderer.setElementAttribute(compRef.location.nativeElement, 'class', this.location.element.nativeElement.className);
+    compRef.changeDetectorRef.detectChanges();
     this.loaded = true;
-    return this.resolver.resolveComponent(JsonSchema).then(componentFactory => {
-      let contextInjector = this.location.parentInjector;
-      let compRef = this.location.createComponent(
-          componentFactory, null, contextInjector, null);
-      this.initComponent(compRef.instance);
-      this._renderer.setElementAttribute(compRef.location.nativeElement, 'class', this.location.element.nativeElement.className);
-      compRef.changeDetectorRef.detectChanges();
-      return compRef;
-    }).catch(err => {
-      console.log(err);
-      throw err;
-    });
+    return compRef;
   }
 
   load() {
@@ -63,19 +57,18 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit {
   loadCached() {
     this.pointer = this.normalizePointer();
     if (cache[this.pointer]) {
-      cache[this.pointer].then((compRef) => {
-        setTimeout( ()=> {
-          let $element = compRef.location.nativeElement;
+      let compRef = cache[this.pointer];
+      setTimeout( ()=> {
+        let $element = compRef.location.nativeElement;
 
-          // skip caching view with tabs inside (discriminator)
-          // as it needs attached controller
-          if (!this.disableLazy && (compRef.instance.hasDescendants || compRef.instance._hasSubSchemas)) {
-            this._loadAfterSelf();
-            return;
-          }
-          insertAfter($element.cloneNode(true), this.elementRef.nativeElement);
-          this.loaded = true;
-        });
+        // skip caching view with descendant schemas
+        // as it needs attached controller
+        if (!this.disableLazy && (compRef.instance.hasDescendants || compRef.instance._hasSubSchemas)) {
+          this._loadAfterSelf();
+          return;
+        }
+        insertAfter($element.cloneNode(true), this.elementRef.nativeElement);
+        this.loaded = true;
       });
     } else {
       cache[this.pointer] = this._loadAfterSelf();
diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html
index dabb35da..3931b05e 100644
--- a/lib/components/JsonSchema/json-schema.html
+++ b/lib/components/JsonSchema/json-schema.html
@@ -39,7 +39,7 @@
     </div>
   </template>
   <template ngSwitchCase="array">
-    <json-schema class="nested-schema" [pointer]="schema._pointer" [isArray]='true'
+    <json-schema class="nested-schema" [pointer]="schema._pointer"
     [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema"> </json-schema>
   </template>
   <template ngSwitchCase="object">
diff --git a/lib/components/JsonSchema/json-schema.spec.ts b/lib/components/JsonSchema/json-schema.spec.ts
index 65fed134..3205c0be 100644
--- a/lib/components/JsonSchema/json-schema.spec.ts
+++ b/lib/components/JsonSchema/json-schema.spec.ts
@@ -32,7 +32,7 @@ describe('Redoc components', () => {
 
     it('should init component', () => {
       component.pointer = '';
-      (<any>specMgr)._schema = {type: 'object'};
+      (<SpecManager>specMgr)._schema = {type: 'object'};
       fixture.detectChanges();
       expect(component).not.toBeNull();
     });
diff --git a/lib/components/JsonSchema/json-schema.ts b/lib/components/JsonSchema/json-schema.ts
index 51f600bd..1b2c1fd8 100644
--- a/lib/components/JsonSchema/json-schema.ts
+++ b/lib/components/JsonSchema/json-schema.ts
@@ -1,31 +1,28 @@
 'use strict';
 
-import { Input, Renderer, ElementRef, forwardRef } from '@angular/core';
+import { Component, Input, Renderer, ElementRef } from '@angular/core';
 
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
-import { DropDown } from '../../shared/components/index';
+import { BaseComponent, SpecManager } from '../base';
 import { SchemaNormalizer, SchemaHelper } from '../../services/index';
-import { JsonSchemaLazy } from './json-schema-lazy';
-import { Zippy } from '../../shared/components/Zippy/zippy';
 
-@RedocComponent({
+@Component({
   selector: 'json-schema',
   templateUrl: './json-schema.html',
-  styleUrls: ['./json-schema.css'],
-  directives: [JsonSchema, DropDown, forwardRef(() => JsonSchemaLazy), Zippy],
-  detect: true
+  styleUrls: ['./json-schema.css']
 })
 export class JsonSchema extends BaseComponent {
+  @Input() pointer: string;
+  @Input() final: boolean = false;
+  @Input() nestOdd: boolean;
+  @Input() childFor: string;
+  @Input() isRequestSchema: boolean;
+
   schema: any = {};
   activeDescendant:any = {};
   hasDescendants: boolean = false;
   _hasSubSchemas: boolean = false;
   properties: any;
   _isArray: boolean;
-  @Input() final: boolean = false;
-  @Input() nestOdd: boolean;
-  @Input() childFor: string;
-  @Input() isRequestSchema: boolean;
   normalizer: SchemaNormalizer;
   autoExpand = false;
 
diff --git a/lib/components/Method/method.ts b/lib/components/Method/method.ts
index caa791b2..b36ad79e 100644
--- a/lib/components/Method/method.ts
+++ b/lib/components/Method/method.ts
@@ -1,27 +1,20 @@
 'use strict';
-import { Input } from '@angular/core';
+import { Input, Component } from '@angular/core';
 import JsonPointer from '../../utils/JsonPointer';
-import { RedocComponent, BaseComponent, SpecManager} from '../base';
-
-import { SelectOnClick } from '../../shared/components/SelectOnClick/select-on-click.directive';
-
-import { ParamsList } from '../ParamsList/params-list';
-import { ResponsesList } from '../ResponsesList/responses-list';
-import { ResponsesSamples } from '../ResponsesSamples/responses-samples';
-import { SchemaSample } from '../SchemaSample/schema-sample';
-import { RequestSamples } from '../RequestSamples/request-samples';
+import { BaseComponent, SpecManager } from '../base';
 import { SchemaHelper } from '../../services/schema-helper.service';
 
-@RedocComponent({
+@Component({
   selector: 'method',
   templateUrl: './method.html',
   styleUrls: ['./method.css'],
-  directives: [ ParamsList, ResponsesList, ResponsesSamples, SchemaSample, RequestSamples, SelectOnClick ],
-  detect: true
 })
 export class Method extends BaseComponent {
-  method:any;
+  @Input() pointer:string;
   @Input() tag:string;
+
+  method:any;
+
   constructor(specMgr:SpecManager) {
     super(specMgr);
   }
diff --git a/lib/components/MethodsList/methods-list.ts b/lib/components/MethodsList/methods-list.ts
index 1fabe686..805dc5bc 100644
--- a/lib/components/MethodsList/methods-list.ts
+++ b/lib/components/MethodsList/methods-list.ts
@@ -1,21 +1,18 @@
 'use strict';
-
-import { forwardRef } from '@angular/core';
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
-import { Method } from '../Method/method';
-import { EncodeURIComponentPipe } from '../../utils/pipes';
+import { Component, Input } from '@angular/core';
+import { BaseComponent, SpecManager } from '../base';
 import { SchemaHelper } from '../../services/index';
 
-@RedocComponent({
+@Component({
   selector: 'methods-list',
   templateUrl: './methods-list.html',
-  styleUrls: ['./methods-list.css'],
-  directives: [ forwardRef(() => Method) ],
-  pipes: [ EncodeURIComponentPipe ],
-  detect: true
+  styleUrls: ['./methods-list.css']
 })
 export class MethodsList extends BaseComponent {
+  @Input() pointer:string;
+
   tags:Array<any> = [];
+
   constructor(specMgr:SpecManager) {
     super(specMgr);
   }
diff --git a/lib/components/ParamsList/params-list.ts b/lib/components/ParamsList/params-list.ts
index 98116eef..6376499a 100644
--- a/lib/components/ParamsList/params-list.ts
+++ b/lib/components/ParamsList/params-list.ts
@@ -1,8 +1,6 @@
 'use strict';
-
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
-import { JsonSchema } from '../JsonSchema/json-schema';
-import { JsonSchemaLazy } from '../JsonSchema/json-schema-lazy';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { BaseComponent, SpecManager } from '../base';
 import { SchemaHelper } from '../../services/schema-helper.service';
 
 function safePush(obj, prop, item) {
@@ -10,13 +8,14 @@ function safePush(obj, prop, item) {
   obj[prop].push(item);
 }
 
-@RedocComponent({
+@Component({
   selector: 'params-list',
   templateUrl: './params-list.html',
   styleUrls: ['./params-list.css'],
-  directives: [JsonSchema, JsonSchemaLazy]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParamsList extends BaseComponent {
+  @Input() pointer:string;
 
   params: Array<any>;
   empty: boolean;
diff --git a/lib/components/Redoc/redoc.spec.ts b/lib/components/Redoc/redoc.spec.ts
index 0d278a70..288bb116 100644
--- a/lib/components/Redoc/redoc.spec.ts
+++ b/lib/components/Redoc/redoc.spec.ts
@@ -1,15 +1,14 @@
 'use strict';
 
 import { getChildDebugElement } from '../../../tests/helpers';
-import { Component, ComponentRef } from '@angular/core';
-import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import { Component } from '@angular/core';
 
 import {
   inject,
   async
 } from '@angular/core/testing';
 
-import { TestComponentBuilder } from '@angular/compiler/testing';
+import { TestComponentBuilder } from '@angular/core/testing';
 
 import { Redoc } from './redoc';
 import { SpecManager } from '../../utils/SpecManager';
@@ -45,122 +44,122 @@ describe('Redoc components', () => {
     });
   });
 
-  describe('Redoc init', () => {
-    let dom = new BrowserDomAdapter();
-    let elem;
-    beforeEach(() => {
-      elem = dom.createElement('redoc');
-      dom.defaultDoc().body.appendChild(elem);
-    });
-
-    afterEach(() => {
-      dom.defaultDoc().body.removeChild(elem);
-    });
-
-    it('should return promise', () => {
-      let res = Redoc.init().catch(() => {/**/});
-      res.should.be.instanceof(Promise);
-    });
-
-    it('should hide loading animation and display message in case of error', async(() => {
-      spyOn(Redoc, 'hideLoadingAnimation').and.callThrough();
-      spyOn(Redoc, 'displayError').and.callThrough();
-      let res = Redoc.init();
-      return res.catch(() => {
-        expect(Redoc.hideLoadingAnimation).toHaveBeenCalled();
-        expect(Redoc.displayError).toHaveBeenCalled();
-      });
-    }));
-
-    //skip because of PhantomJS crashes on this testcase
-    xit('should init redoc', (done) => {
-      var node = document.createElement('redoc');
-      document.body.appendChild(node);
-      let res = Redoc.init('/tests/schemas/extended-petstore.yml');
-      res.then(() => { done(); }, () => {
-        done.fail('Error handler should not been called');
-      });
-    });
-  });
-
-  describe('Redoc destroy', () => {
-    let builder;
-    let fixture;
-    let element;
-    let dom;
-    let destroySpy;
-
-    beforeEach(async(inject([TestComponentBuilder, SpecManager, OptionsService, BrowserDomAdapter],
-      (tcb, specMgr, opts, _dom) => {
-      builder = tcb;
-      optsMgr = opts;
-      dom = _dom;
-      return specMgr.load('/tests/schemas/extended-petstore.yml');
-    })));
-
-    beforeEach(() => {
-      fixture = builder.createSync(TestAppComponent);
-      element = getChildDebugElement(fixture.debugElement, 'methods-list').nativeElement;
-      destroySpy = jasmine.createSpy('spy');
-      Redoc.appRef = <ComponentRef<any>>{
-        destroy: destroySpy
-      };
-      fixture.detectChanges();
-    });
-
-    afterEach(()=> {
-      fixture.destroy();
-      Redoc.appRef = null;
-    });
-
-    it('should call componentRef.destroy', () => {
-      Redoc.destroy();
-      expect(destroySpy).toHaveBeenCalled();
-    });
-
-    it('should create new host element', () => {
-      element.parentElement.removeChild(element);
-      Redoc.destroy();
-      expect(dom.query('redoc')).not.toBeNull();
-      dom.query('redoc').should.not.be.equal(element);
-    });
-
-    it('should set to null appRef', () => {
-      Redoc.destroy();
-      expect(Redoc.appRef).toBeNull();
-    });
-  });
-
-  describe('Redoc autoInit', () => {
-    const testURL = 'testurl';
-    let dom = new BrowserDomAdapter();
-    //let redocInitSpy;
-    let elem: HTMLElement;
-
-    beforeEach(() => {
-      spyOn(Redoc, 'init').and.stub();
-      elem = dom.createElement('redoc');
-      dom.defaultDoc().body.appendChild(elem);
-      dom.setAttribute(elem, 'spec-url', testURL);
-    });
-
-    it('should call Redoc.init with url from param spec-url', () => {
-      Redoc.autoInit();
-      expect(Redoc.init).toHaveBeenCalled();
-      expect((<jasmine.Spy>Redoc.init).calls.argsFor(0)).toEqual([testURL]);
-    });
-
-    it('should not call Redoc.init when spec-url param is not provided', () => {
-      dom.removeAttribute(elem, 'spec-url');
-      Redoc.autoInit();
-      expect(Redoc.init).not.toHaveBeenCalled();
-    });
-
-    afterEach(() => {
-      (<jasmine.Spy>Redoc.init).and.callThrough();
-      dom.defaultDoc().body.removeChild(elem);
-    });
-  });
+  // describe('Redoc init', () => {
+  //   let dom = new BrowserDomAdapter();
+  //   let elem;
+  //   beforeEach(() => {
+  //     elem = dom.createElement('redoc');
+  //     dom.defaultDoc().body.appendChild(elem);
+  //   });
+  //
+  //   afterEach(() => {
+  //     dom.defaultDoc().body.removeChild(elem);
+  //   });
+  //
+  //   it('should return promise', () => {
+  //     let res = Redoc.init().catch(() => {/**/});
+  //     res.should.be.instanceof(Promise);
+  //   });
+  //
+  //   it('should hide loading animation and display message in case of error', async(() => {
+  //     spyOn(Redoc, 'hideLoadingAnimation').and.callThrough();
+  //     spyOn(Redoc, 'displayError').and.callThrough();
+  //     let res = Redoc.init();
+  //     return res.catch(() => {
+  //       expect(Redoc.hideLoadingAnimation).toHaveBeenCalled();
+  //       expect(Redoc.displayError).toHaveBeenCalled();
+  //     });
+  //   }));
+  //
+  //   //skip because of PhantomJS crashes on this testcase
+  //   xit('should init redoc', (done) => {
+  //     var node = document.createElement('redoc');
+  //     document.body.appendChild(node);
+  //     let res = Redoc.init('/tests/schemas/extended-petstore.yml');
+  //     res.then(() => { done(); }, () => {
+  //       done.fail('Error handler should not been called');
+  //     });
+  //   });
+  // });
+  //
+  // describe('Redoc destroy', () => {
+  //   let builder;
+  //   let fixture;
+  //   let element;
+  //   let dom;
+  //   let destroySpy;
+  //
+  //   beforeEach(async(inject([TestComponentBuilder, SpecManager, OptionsService, BrowserDomAdapter],
+  //     (tcb, specMgr, opts, _dom) => {
+  //     builder = tcb;
+  //     optsMgr = opts;
+  //     dom = _dom;
+  //     return specMgr.load('/tests/schemas/extended-petstore.yml');
+  //   })));
+  //
+  //   beforeEach(() => {
+  //     fixture = builder.createSync(TestAppComponent);
+  //     element = getChildDebugElement(fixture.debugElement, 'methods-list').nativeElement;
+  //     destroySpy = jasmine.createSpy('spy');
+  //     Redoc.appRef = <ComponentRef<any>>{
+  //       destroy: destroySpy
+  //     };
+  //     fixture.detectChanges();
+  //   });
+  //
+  //   afterEach(()=> {
+  //     fixture.destroy();
+  //     Redoc.appRef = null;
+  //   });
+  //
+  //   it('should call componentRef.destroy', () => {
+  //     Redoc.destroy();
+  //     expect(destroySpy).toHaveBeenCalled();
+  //   });
+  //
+  //   it('should create new host element', () => {
+  //     element.parentElement.removeChild(element);
+  //     Redoc.destroy();
+  //     expect(dom.query('redoc')).not.toBeNull();
+  //     dom.query('redoc').should.not.be.equal(element);
+  //   });
+  //
+  //   it('should set to null appRef', () => {
+  //     Redoc.destroy();
+  //     expect(Redoc.appRef).toBeNull();
+  //   });
+  // });
+  //
+  // describe('Redoc autoInit', () => {
+  //   const testURL = 'testurl';
+  //   let dom = new BrowserDomAdapter();
+  //   //let redocInitSpy;
+  //   let elem: HTMLElement;
+  //
+  //   beforeEach(() => {
+  //     spyOn(Redoc, 'init').and.stub();
+  //     elem = dom.createElement('redoc');
+  //     dom.defaultDoc().body.appendChild(elem);
+  //     dom.setAttribute(elem, 'spec-url', testURL);
+  //   });
+  //
+  //   it('should call Redoc.init with url from param spec-url', () => {
+  //     Redoc.autoInit();
+  //     expect(Redoc.init).toHaveBeenCalled();
+  //     expect((<jasmine.Spy>Redoc.init).calls.argsFor(0)).toEqual([testURL]);
+  //   });
+  //
+  //   it('should not call Redoc.init when spec-url param is not provided', () => {
+  //     dom.removeAttribute(elem, 'spec-url');
+  //     Redoc.autoInit();
+  //     expect(Redoc.init).not.toHaveBeenCalled();
+  //   });
+  //
+  //   afterEach(() => {
+  //     (<jasmine.Spy>Redoc.init).and.callThrough();
+  //     dom.defaultDoc().body.removeChild(elem);
+  //   });
+  // });
 });
 
 /** Test component that contains a Redoc. */
diff --git a/lib/components/Redoc/redoc.ts b/lib/components/Redoc/redoc.ts
index 970f59fa..6a705830 100644
--- a/lib/components/Redoc/redoc.ts
+++ b/lib/components/Redoc/redoc.ts
@@ -1,43 +1,21 @@
 'use strict';
 
-import { provide, enableProdMode, ElementRef,
-  ComponentRef, AfterViewInit } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { ElementRef, ComponentRef, AfterViewInit, Component } from '@angular/core';
+
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
-import { RedocComponent, BaseComponent } from '../base';
+import { BaseComponent } from '../base';
 
 import detectScollParent from 'scrollparent';
 
-import { ApiInfo } from '../ApiInfo/api-info';
-import { ApiLogo } from '../ApiLogo/api-logo';
-import { MethodsList } from '../MethodsList/methods-list';
-import { SideMenu } from '../SideMenu/side-menu';
-import { Warnings } from '../Warnings/warnings';
-
-import { StickySidebar } from '../../shared/components/index';
-import {SpecManager} from '../../utils/SpecManager';
-import { OptionsService, RedocEventsService, MenuService,
-  ScrollService, Hash, WarningsService } from '../../services/index';
+import { SpecManager } from '../../utils/SpecManager';
+import { OptionsService, RedocEventsService } from '../../services/index';
 
 var dom = new BrowserDomAdapter();
-var _modeLocked = false;
 
-@RedocComponent({
+@Component({
   selector: 'redoc',
-  providers: [
-    SpecManager,
-    BrowserDomAdapter,
-    RedocEventsService,
-    ScrollService,
-    Hash,
-    MenuService,
-    WarningsService
-  ],
   templateUrl: './redoc.html',
   styleUrls: ['./redoc.css'],
-  directives: [ ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar, Warnings ],
-  detect: true,
-  onPushOnly: false
 })
 export class Redoc extends BaseComponent implements AfterViewInit {
   static appRef: ComponentRef<any>;
@@ -61,47 +39,6 @@ export class Redoc extends BaseComponent implements AfterViewInit {
     }, 400);
   }
 
-  static init(specUrl?, options?) {
-    var optionsService = new OptionsService(dom);
-    optionsService.options = options;
-    optionsService.options.specUrl = optionsService.options.specUrl || specUrl;
-    var providers = [
-      provide(OptionsService, {useValue: optionsService})
-    ];
-
-    if (Redoc.appRef) {
-      Redoc.destroy();
-    }
-    Redoc.showLoadingAnimation();
-    return SpecManager.instance().load(specUrl)
-    .then(() => {
-      if (!_modeLocked && !optionsService.options.debugMode) {
-        enableProdMode();
-        _modeLocked = true;
-      }
-      return bootstrap(Redoc, providers);
-    })
-    .then(appRef => {
-      Redoc.hideLoadingAnimation();
-      Redoc.appRef = appRef;
-      console.log('ReDoc bootstrapped!');
-    }).catch(err => {
-      Redoc.hideLoadingAnimation();
-      Redoc.displayError(err);
-      throw err;
-    });
-  }
-
-  static autoInit() {
-    const specUrlAttributeName = 'spec-url';
-    let redocEl = dom.query('redoc');
-    if (!redocEl) return;
-    if (dom.hasAttribute(redocEl, specUrlAttributeName)) {
-      let url = dom.getAttribute(redocEl, specUrlAttributeName);
-      Redoc.init(url);
-    }
-  }
-
   static displayError(err) {
     let redocEl = dom.query('redoc');
     if (!redocEl) return;
@@ -113,28 +50,6 @@ export class Redoc extends BaseComponent implements AfterViewInit {
     redocEl.innerHTML = erroHtml;
   }
 
-  static destroy() {
-    let el = dom.query('redoc');
-    let elClone;
-    let parent;
-    let nextSibling;
-    if (el) {
-      parent = el.parentElement;
-      nextSibling = el.nextElementSibling;
-    }
-
-    elClone = el.cloneNode(false);
-
-    if (Redoc.appRef) {
-      Redoc.appRef.destroy();
-      Redoc.appRef = null;
-
-      // Redoc destroy removes host element, so need to restore it
-      elClone.innerHTML = 'Loading...';
-      if (parent) parent.insertBefore(elClone, nextSibling);
-    }
-  }
-
   constructor(specMgr: SpecManager, optionsMgr:OptionsService, elementRef:ElementRef,
     public events:RedocEventsService) {
     super(specMgr);
diff --git a/lib/components/RequestSamples/request-samples.ts b/lib/components/RequestSamples/request-samples.ts
index 34437e8b..4af785f2 100644
--- a/lib/components/RequestSamples/request-samples.ts
+++ b/lib/components/RequestSamples/request-samples.ts
@@ -1,34 +1,28 @@
 'use strict';
 
-import { ViewChildren, QueryList, EventEmitter, Input} from '@angular/core';
+import { Component, ViewChildren, QueryList, EventEmitter, Input,
+ ChangeDetectionStrategy } from '@angular/core';
 
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
+import { BaseComponent, SpecManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import { Tabs, Tab } from '../../shared/components/index';
-import { SchemaSample } from '../SchemaSample/schema-sample';
-import { PrismPipe } from '../../utils/pipes';
+import { Tabs } from '../../shared/components/index';
 import { RedocEventsService } from '../../services/index';
 
-import { CopyButton } from '../../shared/components/CopyButton/copy-button.directive';
-
-@RedocComponent({
+@Component({
   selector: 'request-samples',
   templateUrl: './request-samples.html',
   styleUrls: ['./request-samples.css'],
-  directives: [SchemaSample, Tabs, Tab, CopyButton],
-  inputs: ['schemaPointer'],
-  pipes: [PrismPipe],
-  detect: true,
-  onPushOnly: false
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RequestSamples extends BaseComponent {
-  childTabs: Tabs;
-  selectedLang: EventEmitter<any>;
-
-  samples: Array<any>;
-
+  @Input() pointer:string;
   @Input() schemaPointer:string;
   @ViewChildren(Tabs) childQuery:QueryList<Tabs>;
+
+  childTabs: Tabs;
+  selectedLang: EventEmitter<any>;
+  samples: Array<any>;
+
   constructor(specMgr:SpecManager, public events:RedocEventsService) {
     super(specMgr);
 
diff --git a/lib/components/ResponsesList/responses-list.ts b/lib/components/ResponsesList/responses-list.ts
index a9227672..885fde8a 100644
--- a/lib/components/ResponsesList/responses-list.ts
+++ b/lib/components/ResponsesList/responses-list.ts
@@ -1,10 +1,8 @@
 'use strict';
 
-import {RedocComponent, BaseComponent, SpecManager} from '../base';
+import { Component, Input } from '@angular/core';
+import { BaseComponent, SpecManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import { JsonSchema } from '../JsonSchema/json-schema';
-import { JsonSchemaLazy } from '../JsonSchema/json-schema-lazy';
-import { Zippy } from '../../shared/components/index';
 import { statusCodeType } from '../../utils/helpers';
 import { OptionsService } from '../../services/index';
 import { SchemaHelper } from '../../services/schema-helper.service';
@@ -13,16 +11,17 @@ function isNumeric(n) {
   return (!isNaN(parseFloat(n)) && isFinite(n));
 }
 
-@RedocComponent({
+@Component({
   selector: 'responses-list',
   templateUrl: './responses-list.html',
-  styleUrls: ['./responses-list.css'],
-  directives: [JsonSchema, Zippy, JsonSchemaLazy],
-  detect: true
+  styleUrls: ['./responses-list.css']
 })
 export class ResponsesList extends BaseComponent {
+  @Input() pointer:string;
+
   responses: Array<any>;
   options: any;
+
   constructor(specMgr:SpecManager, optionsMgr:OptionsService) {
     super(specMgr);
     this.options = optionsMgr.options;
diff --git a/lib/components/ResponsesSamples/responses-samples.ts b/lib/components/ResponsesSamples/responses-samples.ts
index a75fe854..b2555bf3 100644
--- a/lib/components/ResponsesSamples/responses-samples.ts
+++ b/lib/components/ResponsesSamples/responses-samples.ts
@@ -1,10 +1,8 @@
 'use strict';
 
-import { forwardRef } from '@angular/core';
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
+import { Component, Input } from '@angular/core';
+import { BaseComponent, SpecManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import { Tabs, Tab } from '../../shared/components/index';
-import { SchemaSample } from '../index';
 import { statusCodeType } from '../../utils/helpers';
 
 
@@ -17,14 +15,16 @@ function hasExample(response) {
     response.schema);
 }
 
-@RedocComponent({
+@Component({
   selector: 'responses-samples',
   templateUrl: './responses-samples.html',
   styleUrls: ['./responses-samples.css'],
-  directives: [forwardRef( ()=> SchemaSample), Tabs, Tab]
 })
 export class ResponsesSamples extends BaseComponent {
+  @Input() pointer:string;
+
   data: any;
+
   constructor(specMgr:SpecManager) {
     super(specMgr);
   }
diff --git a/lib/components/SchemaSample/schema-sample.ts b/lib/components/SchemaSample/schema-sample.ts
index ae2bb1d3..71cadb8a 100644
--- a/lib/components/SchemaSample/schema-sample.ts
+++ b/lib/components/SchemaSample/schema-sample.ts
@@ -1,27 +1,27 @@
 'use strict';
 
-import { ElementRef, Input } from '@angular/core';
+import { Component, ElementRef, Input, ChangeDetectionStrategy } from '@angular/core';
 
 import * as OpenAPISampler from 'openapi-sampler';
 
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
+import { BaseComponent, SpecManager } from '../base';
 import { JsonFormatter } from '../../utils/JsonFormatterPipe';
 import { SchemaNormalizer } from '../../services/schema-normalizer.service';
 
-import { CopyButton } from '../../shared/components/CopyButton/copy-button.directive';
-
-@RedocComponent({
+@Component({
   selector: 'schema-sample',
   templateUrl: './schema-sample.html',
   pipes: [JsonFormatter],
-  directives: [CopyButton],
-  styleUrls: ['./schema-sample.css']
+  styleUrls: ['./schema-sample.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SchemaSample extends BaseComponent {
+  @Input() pointer:string;
+  @Input() skipReadOnly:boolean;
+
   element: any;
   sample: any;
   enableButtons: boolean = false;
-  @Input() skipReadOnly:boolean;
 
   private _normalizer:SchemaNormalizer;
 
diff --git a/lib/components/SideMenu/side-menu.html b/lib/components/SideMenu/side-menu.html
index 4feb5ac6..72f569c8 100644
--- a/lib/components/SideMenu/side-menu.html
+++ b/lib/components/SideMenu/side-menu.html
@@ -11,7 +11,7 @@
 
     <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [hidden]="cat.headless"
     [ngClass]="{active: cat.active}"> {{cat.name}}</label>
-    <ul class="menu-subitems" @itemAnimation="cat.active ? 'expanded' : 'collapsed'">
+    <ul class="menu-subitems" [@itemAnimation]="cat.active ? 'expanded' : 'collapsed'">
       <li *ngFor="let method of cat.methods; trackBy:summary; let methIdx = index"
         [ngClass]="{active: method.active}"
         (click)="activateAndScroll(idx, methIdx)">
diff --git a/lib/components/SideMenu/side-menu.spec.ts b/lib/components/SideMenu/side-menu.spec.ts
index 70eb249f..67171e78 100644
--- a/lib/components/SideMenu/side-menu.spec.ts
+++ b/lib/components/SideMenu/side-menu.spec.ts
@@ -9,7 +9,7 @@ import {
   async
 } from '@angular/core/testing';
 
-import { TestComponentBuilder } from '@angular/compiler/testing';
+import { TestComponentBuilder } from '@angular/core/testing';
 
 import { MethodsList, SideMenu } from '../index';
 
diff --git a/lib/components/SideMenu/side-menu.ts b/lib/components/SideMenu/side-menu.ts
index 839a8b1b..05c5e350 100644
--- a/lib/components/SideMenu/side-menu.ts
+++ b/lib/components/SideMenu/side-menu.ts
@@ -1,21 +1,19 @@
 'use strict';
 
-import { ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, ChangeDetectorRef } from '@angular/core';
 
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 import { global } from '@angular/core/src/facade/lang';
 import { trigger, state, animate, transition, style } from '@angular/core';
-import { RedocComponent, BaseComponent, SpecManager } from '../base';
+import { BaseComponent, SpecManager } from '../base';
 import { ScrollService, Hash, MenuService, OptionsService } from '../../services/index';
 
 import { MenuCategory } from '../../services/schema-helper.service';
 
-@RedocComponent({
+@Component({
   selector: 'side-menu',
   templateUrl: './side-menu.html',
   styleUrls: ['./side-menu.css'],
-  detect: true,
-  onPushOnly: false,
   animations: [
     trigger('itemAnimation', [
       state('collapsed, void',
diff --git a/lib/components/Warnings/warnings.ts b/lib/components/Warnings/warnings.ts
index b46d7e4b..e5a4f5c0 100644
--- a/lib/components/Warnings/warnings.ts
+++ b/lib/components/Warnings/warnings.ts
@@ -1,14 +1,14 @@
 'use strict';
 
-import { SpecManager, RedocComponent, BaseComponent } from '../base';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { SpecManager, BaseComponent } from '../base';
 import { WarningsService, OptionsService } from '../../services/index';
 
-@RedocComponent({
+@Component({
   selector: 'warnings',
   styleUrls: ['./warnings.css'],
   templateUrl: './warnings.html',
-  detect: true,
-  onPushOnly: false
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class Warnings extends BaseComponent {
   warnings: Array<string> = [];
diff --git a/lib/components/base.ts b/lib/components/base.ts
index 63686372..faae0239 100644
--- a/lib/components/base.ts
+++ b/lib/components/base.ts
@@ -1,21 +1,10 @@
 'use strict';
-import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
-import { CORE_DIRECTIVES, JsonPipe, AsyncPipe } from '@angular/common';
+import { OnInit, OnDestroy } from '@angular/core';
 import { SpecManager } from '../utils/SpecManager';
-import { MarkedPipe, JsonPointerEscapePipe, SafePipe } from '../utils/pipes';
+
 
 export { SpecManager };
 
-// common inputs for all components
-let commonInputs = ['pointer']; // json pointer to the schema chunk
-
-// internal helper function
-function safeConcat(a, b) {
-  let res = a && a.slice() || [];
-  b = (b == undefined) ? [] : b;
-  return res.concat(b);
-}
-
 function snapshot(obj) {
   if(obj == undefined || typeof(obj) !== 'object') {
     return obj;
@@ -32,54 +21,13 @@ function snapshot(obj) {
   return temp;
 }
 
-/**
- * Class decorator
- * Simplifies setup of component metainfo
- * All options are options from either Component or View angular2 decorator
- * For detailed info look angular2 doc
- * @param {Object} options - component options
- * @param {string[]} options.inputs - component inputs
- * @param {*[]} options.directives - directives used by component
- *   (except CORE_DIRECTIVES)
- * @param {*[]} options.pipes - pipes used by component
- * @param {*[]} options.providers - component providers
- * @param {string} options.templateUrl - path to component template
- * @param {string} options.template - component template html
- * @param {string} options.styles - component css styles
- */
-export function RedocComponent(options) {
-  let inputs = safeConcat(options.inputs, commonInputs);
-  let directives = safeConcat(options.directives, CORE_DIRECTIVES);
-  let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe, MarkedPipe, JsonPipe, AsyncPipe, SafePipe]);
-  if (options.onPushOnly === undefined) options.onPushOnly = true;
-
-  return function decorator(target) {
-
-    let componentDecorator = Component({
-      selector: options.selector,
-      inputs: inputs,
-      outputs: options.outputs,
-      providers: options.providers,
-      changeDetection: options.onPushOnly ? ChangeDetectionStrategy.OnPush : ChangeDetectionStrategy.Default,
-      animations: options.animations,
-      templateUrl: options.templateUrl,
-      template: options.template,
-      styles: options.styles,
-      directives: directives,
-      pipes: pipes
-    });
-
-    return componentDecorator(target) || target;
-  };
-}
-
 /**
  * Generic Component
  * @class
  */
 export class BaseComponent implements OnInit, OnDestroy {
-  componentSchema: any = null;
   pointer: string;
+  componentSchema: any = null;
   dereferencedCache = {};
 
   constructor(public specMgr: SpecManager) {
diff --git a/lib/components/index.ts b/lib/components/index.ts
index d6959eb3..c084ce81 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -1,16 +1,25 @@
 'use strict';
 
-export * from './ApiInfo/api-info';
-export * from './ApiLogo/api-logo';
-export * from './JsonSchema/json-schema';
-export * from './JsonSchema/json-schema-lazy';
-export * from './ParamsList/params-list';
-export * from './RequestSamples/request-samples';
-export * from './ResponsesList/responses-list';
-export * from './ResponsesSamples/responses-samples';
-export * from './SchemaSample/schema-sample';
-export * from './SideMenu/side-menu';
-export * from './MethodsList/methods-list';
-export * from './Method/method';
+import { ApiInfo } from './ApiInfo/api-info';
+import { ApiLogo } from './ApiLogo/api-logo';
+import { JsonSchema } from './JsonSchema/json-schema';
+import { JsonSchemaLazy } from './JsonSchema/json-schema-lazy';
+import { ParamsList } from './ParamsList/params-list';
+import { RequestSamples } from './RequestSamples/request-samples';
+import { ResponsesList } from './ResponsesList/responses-list';
+import { ResponsesSamples } from './ResponsesSamples/responses-samples';
+import { SchemaSample } from './SchemaSample/schema-sample';
+import { SideMenu } from './SideMenu/side-menu';
+import { MethodsList } from './MethodsList/methods-list';
+import { Method } from './Method/method';
+import { Warnings } from './Warnings/warnings';
 
-export * from './Redoc/redoc';
+import { Redoc } from './Redoc/redoc';
+
+export const REDOC_DIRECTIVES = [
+  ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
+  ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc
+];
+
+export { ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
+ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc }
diff --git a/lib/index.js b/lib/index.js
index 620fc1af..874f13ae 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -3,13 +3,61 @@ import './components/Redoc/redoc-initial-styles.css!css';
 import 'dropkickjs/build/css/dropkick.css!css';
 import 'prismjs/themes/prism-dark.css!css';
 import 'hint.css/hint.base.css!css';
-import { redocVersion } from './version.js';
+//import { redocVersion } from './version.js';
 
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { RedocModule } from './redoc.module';
 import { Redoc } from './components/index';
+import { optionsService } from './redoc.module';
+import { SpecManager } from './utils/SpecManager';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 
-Redoc.version = redocVersion;
+var dom = new BrowserDomAdapter();
 
-export var init = Redoc.init;
+//Redoc.version = redocVersion;
+var moduleRef;
+export function init(specUrl:string, options?) {
+  if (!optionsService.options.debugMode) {
+    enableProdMode();
+  }
 
-window['Redoc'] = Redoc;
-Redoc.autoInit();
+  if (moduleRef) {
+    destroy();
+  }
+
+  optionsService.options = options;
+  optionsService.options.specUrl = optionsService.options.specUrl || specUrl;
+
+  Redoc.showLoadingAnimation();
+  return SpecManager.instance().load(specUrl)
+  .then(() => {
+    return platformBrowserDynamic().bootstrapModule(RedocModule);
+  })
+  .then(appRef => {
+    Redoc.hideLoadingAnimation();
+    moduleRef = appRef;
+    console.log('ReDoc initialized!');
+  }).catch(err => {
+    Redoc.hideLoadingAnimation();
+    Redoc.displayError(err);
+    throw err;
+  });
+};
+
+export function destroy() {
+  moduleRef.destroy();
+};
+
+
+function autoInit() {
+  const specUrlAttributeName = 'spec-url';
+  let redocEl = dom.query('redoc');
+  if (!redocEl) return;
+  if (dom.hasAttribute(redocEl, specUrlAttributeName)) {
+    let url = dom.getAttribute(redocEl, specUrlAttributeName);
+    init(url);
+  }
+};
+
+autoInit();
diff --git a/lib/redoc.module.ts b/lib/redoc.module.ts
new file mode 100644
index 00000000..8b7b4138
--- /dev/null
+++ b/lib/redoc.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, provide } from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { Redoc, REDOC_DIRECTIVES } from './components/index';
+import { REDOC_COMMON_DIRECTIVES } from './shared/components/index';
+import { REDOC_PIPES } from './utils/pipes';
+
+import { OptionsService, RedocEventsService, MenuService,
+  ScrollService, Hash, WarningsService } from './services/index';
+import { SpecManager } from './utils/SpecManager';
+
+export const optionsService = new OptionsService(new BrowserDomAdapter());
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES],
+  bootstrap: [ Redoc ],
+  providers: [
+    SpecManager,
+    BrowserDomAdapter,
+    RedocEventsService,
+    ScrollService,
+    Hash,
+    MenuService,
+    WarningsService,
+    provide(OptionsService, {useValue: optionsService})
+  ],
+})
+export class RedocModule {
+}
diff --git a/lib/shared/components/DropDown/drop-down.ts b/lib/shared/components/DropDown/drop-down.ts
index 17a05eb0..0ea12adc 100644
--- a/lib/shared/components/DropDown/drop-down.ts
+++ b/lib/shared/components/DropDown/drop-down.ts
@@ -1,7 +1,6 @@
 'use strict';
 
 import { Component, EventEmitter, ElementRef, Output, AfterContentInit } from '@angular/core';
-import { CORE_DIRECTIVES } from '@angular/common';
 import DropKick from 'dropkickjs';
 
 @Component({
@@ -11,7 +10,6 @@ import DropKick from 'dropkickjs';
       <ng-content></ng-content>
     </select>
   `,
-  directives: [CORE_DIRECTIVES],
   styleUrls: ['./drop-down.css']
 })
 export class DropDown implements AfterContentInit {
diff --git a/lib/shared/components/Tabs/tabs.ts b/lib/shared/components/Tabs/tabs.ts
index 386d87ca..1d1d1b66 100644
--- a/lib/shared/components/Tabs/tabs.ts
+++ b/lib/shared/components/Tabs/tabs.ts
@@ -1,7 +1,6 @@
 'use strict';
 
 import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
-import { CORE_DIRECTIVES } from '@angular/common';
 import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
@@ -13,7 +12,6 @@ import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
     </ul>
     <ng-content></ng-content>
   `,
-  directives: [CORE_DIRECTIVES],
   styleUrls: ['tabs.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -70,7 +68,6 @@ export class Tabs implements OnInit {
       <ng-content></ng-content>
     </div>
   `,
-  directives: [CORE_DIRECTIVES],
   styles: [`
     .tab-wrap {
       display: none;
diff --git a/lib/shared/components/Zippy/zippy.spec.ts b/lib/shared/components/Zippy/zippy.spec.ts
index 01310c2f..4d013756 100644
--- a/lib/shared/components/Zippy/zippy.spec.ts
+++ b/lib/shared/components/Zippy/zippy.spec.ts
@@ -5,7 +5,6 @@ import { getChildDebugElement, mouseclick } from '../../../../tests/helpers';
 import { Component } from '@angular/core';
 import {
   inject,
-  expect,
   TestComponentBuilder
 } from '@angular/core/testing';
 
diff --git a/lib/shared/components/Zippy/zippy.ts b/lib/shared/components/Zippy/zippy.ts
index 43102f32..2819aa39 100644
--- a/lib/shared/components/Zippy/zippy.ts
+++ b/lib/shared/components/Zippy/zippy.ts
@@ -1,13 +1,10 @@
 'use strict';
 
 import { Component, EventEmitter, Output, Input } from '@angular/core';
-import { CORE_DIRECTIVES } from '@angular/common';
-
 @Component({
   selector: 'zippy',
   templateUrl: './zippy.html',
-  styleUrls: ['./zippy.css'],
-  directives: [CORE_DIRECTIVES]
+  styleUrls: ['./zippy.css']
 })
 export class Zippy {
   @Input() type = 'general';
diff --git a/lib/shared/components/index.ts b/lib/shared/components/index.ts
index 6d37711d..195e796a 100644
--- a/lib/shared/components/index.ts
+++ b/lib/shared/components/index.ts
@@ -1,5 +1,13 @@
 'use strict';
-export * from './DropDown/drop-down';
-export * from './StickySidebar/sticky-sidebar';
-export * from './Tabs/tabs';
-export * from './Zippy/zippy';
+import { DropDown } from './DropDown/drop-down';
+import { StickySidebar } from './StickySidebar/sticky-sidebar';
+import { Tabs, Tab } from './Tabs/tabs';
+import { Zippy } from './Zippy/zippy';
+import { CopyButton } from './CopyButton/copy-button.directive';
+import { SelectOnClick } from './SelectOnClick/select-on-click.directive';
+
+export const REDOC_COMMON_DIRECTIVES = [
+  DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick
+];
+
+export { DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick }
diff --git a/lib/utils/SpecManager.ts b/lib/utils/SpecManager.ts
index 080e52e0..894abe55 100644
--- a/lib/utils/SpecManager.ts
+++ b/lib/utils/SpecManager.ts
@@ -32,8 +32,8 @@ export class SpecManager {
       .then(schema => {
           this._url = url;
           this._schema = schema;
-          resolve(this._schema);
           this.init();
+          return resolve(this._schema);
       }, err => reject(err));
     });
 
diff --git a/lib/utils/pipes.ts b/lib/utils/pipes.ts
index acff40fa..3e2c8328 100644
--- a/lib/utils/pipes.ts
+++ b/lib/utils/pipes.ts
@@ -117,3 +117,7 @@ export class EncodeURIComponentPipe implements PipeTransform {
     return encodeURIComponent(value);
   }
 }
+
+export const REDOC_PIPES = [
+  JsonPointerEscapePipe, MarkedPipe, SafePipe, PrismPipe, EncodeURIComponentPipe
+];
diff --git a/package.json b/package.json
index 30a9624a..19e87509 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,11 @@
   "jspm": {
     "configFile": "system.config.js",
     "dependencies": {
-      "@angular/common@2.0.0-rc.4": "npm:@angular/common@2.0.0-rc.4",
-      "@angular/compiler@2.0.0-rc.4": "npm:@angular/compiler@2.0.0-rc.4",
-      "@angular/core@2.0.0-rc.4": "npm:@angular/core@2.0.0-rc.4",
-      "@angular/platform-browser-dynamic@2.0.0-rc.4": "npm:@angular/platform-browser-dynamic@2.0.0-rc.4",
-      "@angular/platform-browser@2.0.0-rc.4": "npm:@angular/platform-browser@2.0.0-rc.4",
+      "@angular/common": "npm:@angular/common@^2.0.0-rc.5",
+      "@angular/compiler": "npm:@angular/compiler@^2.0.0-rc.5",
+      "@angular/core": "npm:@angular/core@^2.0.0-rc.5",
+      "@angular/platform-browser": "npm:@angular/platform-browser@^2.0.0-rc.5",
+      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.0.0-rc.5",
       "dropkickjs": "npm:dropkickjs@^2.1.8",
       "es6-shim": "github:es-shims/es6-shim@^0.33.6",
       "hint.css": "npm:hint.css@^2.2.1",
@@ -51,7 +51,7 @@
       "slugify": "npm:slugify@^0.1.1",
       "stream-http": "npm:stream-http@^2.3.0",
       "url": "github:jspm/nodelibs-url@^0.1.0",
-      "zone.js": "npm:zone.js@0.6.12"
+      "zone.js": "npm:zone.js@^0.6.14"
     },
     "devDependencies": {
       "babel": "npm:babel-core@^5.8.34",
@@ -78,12 +78,11 @@
     }
   },
   "devDependencies": {
-    "@angular/common": "^2.0.0-rc.4",
-    "@angular/compiler": "^2.0.0-rc.4",
-    "@angular/core": "^2.0.0-rc.4",
-    "@angular/platform-browser": "^2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
-    "@angular/platform-server": "^2.0.0-rc.4",
+    "@angular/common": "^2.0.0-rc.5",
+    "@angular/compiler": "^2.0.0-rc.5",
+    "@angular/core": "^2.0.0-rc.5",
+    "@angular/platform-browser": "^2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
     "babel-polyfill": "^6.3.14",
     "branch-release": "^1.0.3",
     "browser-sync": "^2.10.1",
@@ -141,6 +140,6 @@
     "typescript": "^1.8.10",
     "vinyl-paths": "^2.0.0",
     "yargs": "^4.7.1",
-    "zone.js": "^0.6.12"
+    "zone.js": "^0.6.14"
   }
 }
diff --git a/system.config.js b/system.config.js
index ca3c9e89..54a04bb6 100644
--- a/system.config.js
+++ b/system.config.js
@@ -16,11 +16,11 @@ System.config({
   },
 
   map: {
-    "@angular/common": "npm:@angular/common@2.0.0-rc.4",
-    "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.4",
-    "@angular/core": "npm:@angular/core@2.0.0-rc.4",
-    "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0-rc.4",
+    "@angular/common": "npm:@angular/common@2.0.0-rc.5",
+    "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5",
+    "@angular/core": "npm:@angular/core@2.0.0-rc.5",
+    "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0-rc.5",
     "babel": "npm:babel-core@5.8.34",
     "babel-runtime": "npm:babel-runtime@5.8.34",
     "clean-css": "npm:clean-css@3.4.17",
@@ -42,7 +42,7 @@ System.config({
     "stream-http": "npm:stream-http@2.3.0",
     "systemjs/plugin-json": "github:systemjs/plugin-json@0.1.2",
     "url": "github:jspm/nodelibs-url@0.1.0",
-    "zone.js": "npm:zone.js@0.6.12",
+    "zone.js": "npm:zone.js@0.6.14",
     "github:jspm/nodelibs-assert@0.1.0": {
       "assert": "npm:assert@1.4.1"
     },
@@ -86,7 +86,7 @@ System.config({
       "path-browserify": "npm:path-browserify@0.0.0"
     },
     "github:jspm/nodelibs-process@0.1.2": {
-      "process": "npm:process@0.11.5"
+      "process": "npm:process@0.11.8"
     },
     "github:jspm/nodelibs-punycode@0.1.0": {
       "punycode": "npm:punycode@1.3.2"
@@ -118,30 +118,30 @@ System.config({
     "github:jspm/nodelibs-zlib@0.1.0": {
       "browserify-zlib": "npm:browserify-zlib@0.1.4"
     },
-    "npm:@angular/common@2.0.0-rc.4": {
-      "@angular/core": "npm:@angular/core@2.0.0-rc.4",
+    "npm:@angular/common@2.0.0-rc.5": {
+      "@angular/core": "npm:@angular/core@2.0.0-rc.5",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
-    "npm:@angular/compiler@2.0.0-rc.4": {
-      "@angular/core": "npm:@angular/core@2.0.0-rc.4",
+    "npm:@angular/compiler@2.0.0-rc.5": {
+      "@angular/core": "npm:@angular/core@2.0.0-rc.5",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
-    "npm:@angular/core@2.0.0-rc.4": {
+    "npm:@angular/core@2.0.0-rc.5": {
       "process": "github:jspm/nodelibs-process@0.1.2",
       "rxjs": "npm:rxjs@5.0.0-beta.6",
       "zone.js": "npm:zone.js@0.6.12"
     },
-    "npm:@angular/platform-browser-dynamic@2.0.0-rc.4": {
-      "@angular/common": "npm:@angular/common@2.0.0-rc.4",
-      "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.4",
-      "@angular/core": "npm:@angular/core@2.0.0-rc.4",
-      "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.4",
+    "npm:@angular/platform-browser-dynamic@2.0.0-rc.5": {
+      "@angular/common": "npm:@angular/common@2.0.0-rc.5",
+      "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5",
+      "@angular/core": "npm:@angular/core@2.0.0-rc.5",
+      "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.5",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
-    "npm:@angular/platform-browser@2.0.0-rc.4": {
-      "@angular/common": "npm:@angular/common@2.0.0-rc.4",
-      "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.4",
-      "@angular/core": "npm:@angular/core@2.0.0-rc.4",
+    "npm:@angular/platform-browser@2.0.0-rc.5": {
+      "@angular/common": "npm:@angular/common@2.0.0-rc.5",
+      "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5",
+      "@angular/core": "npm:@angular/core@2.0.0-rc.5",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
     "npm:amdefine@1.0.0": {
@@ -705,6 +705,11 @@ System.config({
       "fs": "github:jspm/nodelibs-fs@0.1.2",
       "vm": "github:jspm/nodelibs-vm@0.1.0"
     },
+    "npm:process@0.11.8": {
+      "assert": "github:jspm/nodelibs-assert@0.1.0",
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "vm": "github:jspm/nodelibs-vm@0.1.0"
+    },
     "npm:public-encrypt@4.0.0": {
       "bn.js": "npm:bn.js@4.11.4",
       "browserify-rsa": "npm:browserify-rsa@4.0.1",
@@ -934,6 +939,10 @@ System.config({
     "npm:zone.js@0.6.12": {
       "buffer": "github:jspm/nodelibs-buffer@0.1.0",
       "process": "github:jspm/nodelibs-process@0.1.2"
+    },
+    "npm:zone.js@0.6.14": {
+      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.2"
     }
   }
 });
diff --git a/tests/setup.ts b/tests/setup.ts
index 82a0493e..912e1987 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,25 +1,33 @@
 'use strict';
 
-import {setBaseTestProviders} from '@angular/core/testing';
-import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
-import { OptionsService, RedocEventsService, Hash, ScrollService, MenuService } from '../lib/services/index';
+import {TestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import { OptionsService, RedocEventsService, MenuService,
+  ScrollService, Hash, WarningsService } from '../lib/services/index';
 import { SpecManager } from '../lib/utils/SpecManager';
-import { provide } from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import { REDOC_PIPES } from '../lib/utils/pipes';
+import { REDOC_COMMON_DIRECTIVES } from '../lib/shared/components/index';
+import { REDOC_DIRECTIVES } from '../lib/components/index';
 
-import {
-  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
-} from '@angular/platform-browser-dynamic/testing';
+TestBed.initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
 
-setBaseTestProviders(
-  [
-    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-    provide(BrowserDomAdapter, {useClass: BrowserDomAdapter}),
-    provide(OptionsService, {useClass: OptionsService}),
-    provide(RedocEventsService, {useClass: RedocEventsService}),
-    provide(SpecManager, {useClass: SpecManager}),
-    provide(Hash, {useClass: Hash}),
-    provide(ScrollService, {useClass: ScrollService}),
-    provide(MenuService, {useClass: MenuService})
-  ],
-  [TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS]);
+beforeEach( () => {
+  TestBed.configureTestingModule({
+    providers: [
+      BrowserDomAdapter,
+      SpecManager,
+      BrowserDomAdapter,
+      RedocEventsService,
+      ScrollService,
+      Hash,
+      MenuService,
+      WarningsService,
+      OptionsService
+    ],
+    declarations: [REDOC_PIPES, REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES]
+  });
+});