updated angular to rc + refactor

build/tasks/build.js

@@ -41,6 +41,7 @@ gulp.task('inlineTemplates', ['sass'], function() {
 var JS_DEV_DEPS = [
   'lib/utils/browser-update.js',
   'node_modules/zone.js/dist/zone.js',
+  'node_modules/zone.js/dist/long-stack-trace-zone.js',
   'node_modules/reflect-metadata/Reflect.js',
   'node_modules/babel-polyfill/dist/polyfill.js'
 ];

lib/components/ApiInfo/api-info.js

@@ -9,7 +9,7 @@ import OptionsManager from '../../options';
   templateUrl: './lib/components/ApiInfo/api-info.html'
 })
 @Reflect.metadata('parameters', [[SchemaManager], [OptionsManager]])
-export default class ApiInfo extends BaseComponent {
+export class ApiInfo extends BaseComponent {
   constructor(schemaMgr, optionsMgr) {
     super(schemaMgr);
     this.optionsMgr = optionsMgr;

lib/components/ApiInfo/api-info.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 .api-info-header {
   font-weight: normal;

lib/components/ApiInfo/api-info.spec.js

@@ -4,13 +4,14 @@ import { getChildDebugElement } from 'tests/helpers';
 import {Component, provide} from '@angular/core';
 
 import {
-  TestComponentBuilder,
-  async,
   inject,
+  async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import ApiInfo from 'lib/components/ApiInfo/api-info';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/ApiLogo/api-logo.js

@@ -7,7 +7,7 @@ import {RedocComponent, BaseComponent} from '../base';
   styleUrls: ['./lib/components/ApiLogo/api-logo.css'],
   templateUrl: './lib/components/ApiLogo/api-logo.html'
 })
-export default class ApiLogo extends BaseComponent {
+export class ApiLogo extends BaseComponent {
   constructor(schemaMgr) {
     super(schemaMgr);
   }

lib/components/ApiLogo/api-logo.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 img {
   max-height: 150px;

lib/components/ApiLogo/api-logo.spec.js

@@ -4,13 +4,14 @@ import { getChildDebugElement } from 'tests/helpers';
 import {Component, provide} from '@angular/core';
 
 import {
-  TestComponentBuilder,
-  async,
   inject,
+  async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import ApiLogo from 'lib/components/ApiLogo/api-logo';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/JsonSchema/json-schema-common.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 $lines-width: 1px;
 $bullet-size: 1px;
 $cell-spacing: 25px;

lib/components/JsonSchema/json-schema-lazy.js

@@ -4,7 +4,7 @@ import {Component, ElementRef, ViewContainerRef} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {DynamicComponentLoader} from '@angular/core';
 
-import JsonSchema from './json-schema';
+import {JsonSchema} from './json-schema';
 import OptionsManager from '../../options';
 import SchemaManager from '../../utils/SchemaManager';
 
@@ -19,7 +19,7 @@ var cache = {};
   directives: [CORE_DIRECTIVES]
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ViewContainerRef], [ElementRef], [DynamicComponentLoader], [OptionsManager]])
-export default class JsonSchemaLazy {
+export class JsonSchemaLazy {
 
   constructor(schemaMgr, viewRef, elementRef, dcl, optionsMgr) {
     this.viewRef = viewRef;

lib/components/JsonSchema/json-schema-lazy.spec.js

@@ -6,12 +6,14 @@ import {DynamicComponentLoader} from '@angular/core';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
-  TestComponentBuilder,
   inject,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
+
 
 import JsonSchemaLazy from 'lib/components/JsonSchema/json-schema-lazy';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/JsonSchema/json-schema.js

@@ -1,9 +1,9 @@
 'use strict';
 
-import {ElementRef} from '@angular/core';
+import { ElementRef } from '@angular/core';
 
-import {RedocComponent, BaseComponent, SchemaManager} from '../base';
-import {DropDown} from '../../common/components/DropDown/dropdown';
+import { RedocComponent, BaseComponent, SchemaManager } from '../base';
+import { DropDown } from '../..//shared/components/index';
 import JsonPointer from '../../utils/JsonPointer';
 
 @RedocComponent({
@@ -14,7 +14,7 @@ import JsonPointer from '../../utils/JsonPointer';
   inputs: ['isArray', 'final', 'nestOdd', 'childFor', 'skipReadOnly']
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
-export default class JsonSchema extends BaseComponent {
+export class JsonSchema extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
     this.$element = elementRef.nativeElement;

lib/components/JsonSchema/json-schema.spec.js

@@ -5,12 +5,13 @@ import {Component, provide} from '@angular/core';
 import OptionsManager from 'lib/options';
 
 import {
-  TestComponentBuilder,
   inject,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import JsonSchema from 'lib/components/JsonSchema/json-schema';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/Method/method.html

@@ -20,7 +20,7 @@
     </span>
     <div *ngIf="data.bodyParam">
         <br>
-        <request-samples [pointer]="pointer" [bodySchemaPtr]="data.bodyParam._pointer">
+        <request-samples [pointer]="pointer" [schemaPointer]="data.bodyParam._pointer">
         </request-samples>
     </div>
     <div>

lib/components/Method/method.js

@@ -1,22 +1,30 @@
 'use strict';
 
-import {JsonPointer} from '../../utils/JsonPointer';
-import {RedocComponent, BaseComponent} from '../base';
+import { forwardRef } from '@angular/core';
+import { JsonPointer } from '../../utils/JsonPointer';
+import { RedocComponent, BaseComponent } from '../base';
 
-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 {
+  ParamsList,
+  ResponsesList,
+  ResponsesSamples,
+  SchemaSample,
+  RequestSamples
+} from '../index';
 
 @RedocComponent({
   selector: 'method',
   templateUrl: './lib/components/Method/method.html',
   styleUrls: ['./lib/components/Method/method.css'],
-  directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample, RequestSamples],
+  directives: [
+    forwardRef(() => ParamsList),
+    forwardRef(() => ResponsesList),
+    forwardRef(() => ResponsesSamples),
+    forwardRef(() => SchemaSample),
+    forwardRef(() => RequestSamples)],
   inputs: ['tag']
 })
-export default class Method extends BaseComponent {
+export class Method extends BaseComponent {
   constructor(schemaMgr) {
     super(schemaMgr);
   }

lib/components/Method/method.scss

@@ -1,5 +1,5 @@
-@import '../../common/styles/variables';
-@import '../../common/styles/share-link';
+@import '../../shared/styles/variables';
+@import '../../shared/styles/share-link';
 
 :host {
   padding-bottom: 100px;

lib/components/Method/method.spec.js

@@ -5,13 +5,14 @@ import {Component, provide} from '@angular/core';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
-  TestComponentBuilder,
-  async,
   inject,
+  async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import Method from 'lib/components/Method/method';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/MethodsList/methods-list.js

@@ -1,8 +1,8 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
-import Method from '../Method/method';
-import {EncodeURIComponentPipe} from '../../utils/pipes';
+import { RedocComponent, BaseComponent } from '../base';
+import { Method } from '../index';
+import { EncodeURIComponentPipe } from '../../utils/pipes';
 
 @RedocComponent({
   selector: 'methods-list',
@@ -11,7 +11,7 @@ import {EncodeURIComponentPipe} from '../../utils/pipes';
   directives: [Method],
   pipes: [EncodeURIComponentPipe]
 })
-export default class MethodsList extends BaseComponent {
+export class MethodsList extends BaseComponent {
 
   constructor(schemaMgr) {
     super(schemaMgr);

lib/components/MethodsList/methods-list.scss

@@ -1,5 +1,5 @@
-@import '../../common/styles/variables';
-@import '../../common/styles/share-link';
+@import '../../shared/styles/variables';
+@import '../../shared/styles/share-link';
 
 .tag-info {
   padding: 40px;

lib/components/MethodsList/methods-list.spec.js

@@ -6,13 +6,14 @@ import OptionsManager from 'lib/options';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
-  TestComponentBuilder,
   inject,
   async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import MethodsList from 'lib/components/MethodsList/methods-list';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/ParamsList/params-list.js

@@ -1,8 +1,7 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
-import JsonSchema from '../JsonSchema/json-schema';
-import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
+import { RedocComponent, BaseComponent } from '../base';
+import { JsonSchema, JsonSchemaLazy } from '../index';
 
 function safePush(obj, prop, item) {
   if (!obj[prop]) obj[prop] = [];
@@ -15,7 +14,7 @@ function safePush(obj, prop, item) {
   styleUrls: ['./lib/components/ParamsList/params-list.css'],
   directives: [JsonSchema, JsonSchemaLazy]
 })
-export default class ParamsList extends BaseComponent {
+export class ParamsList extends BaseComponent {
   constructor(schemaMgr) {
     super(schemaMgr);
   }

lib/components/ParamsList/params-list.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 $hint-color: #999999;
 

lib/components/Redoc/redoc.js

@@ -1,20 +1,25 @@
 'use strict';
 
-import {ChangeDetectionStrategy, provide, enableProdMode} from '@angular/core';
+import {provide, enableProdMode} from '@angular/core';
 import {ElementRef} from '@angular/core';
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+
 import detectScollParent from 'scrollparent';
+
 import {RedocComponent, BaseComponent} from '../base';
 import SchemaManager from '../../utils/SchemaManager';
 
-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 StickySidebar from '../../common/components/StickySidebar/sticky-sidebar';
+import {
+  ApiInfo,
+  ApiLogo,
+  MethodsList,
+  SideMenu
+} from '../index';
+import { StickySidebar } from '../../shared/components/index';
+
 import OptionsManager from '../../options';
-import {redocEvents} from '../../events';
+import { RedocEventsService } from '../../services/index';
 
 import './redoc-loading-styles.css!css';
 
@@ -25,23 +30,30 @@ var _modeLocked = false;
   selector: 'redoc',
   providers: [
     SchemaManager,
-    BrowserDomAdapter
+    BrowserDomAdapter,
+    RedocEventsService
   ],
   templateUrl: './lib/components/Redoc/redoc.html',
   styleUrls: ['./lib/components/Redoc/redoc.css'],
-  directives: [ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar],
-  changeDetection: ChangeDetectionStrategy.Default
+  directives: [ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar]
 })
 @Reflect.metadata('parameters', [
-  [SchemaManager], [OptionsManager], [ElementRef]])
-export default class Redoc extends BaseComponent {
-  constructor(schemaMgr, optionsMgr, elementRef) {
+  [SchemaManager], [OptionsManager], [ElementRef], [RedocEventsService]])
+export class Redoc extends BaseComponent {
+  constructor(schemaMgr, optionsMgr, elementRef, events) {
     super(schemaMgr);
     this.element = elementRef.nativeElement;
     //parse options (top level component doesn't support inputs)
     optionsMgr.parseOptions( this.element );
     optionsMgr.options.$scrollParent = detectScollParent( this.element );
     this.options = optionsMgr.options;
+    this.events = events;
+  }
+
+  ngAfterViewInit() {
+    setTimeout( () => {
+      this.events.bootstrapped.next();
+    });
   }
 
   static showLoadingAnimation() {
@@ -82,8 +94,6 @@ export default class Redoc extends BaseComponent {
       (appRef) => {
         Redoc.hideLoadingAnimation();
         Redoc.appRef = appRef;
-        // setTimeout to allow cached elements to init
-        setTimeout(() => redocEvents.bootstrapped.next());
         console.log('ReDoc bootstrapped!');
       },
       error => {

lib/components/Redoc/redoc.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 :host {
     display: block;

lib/components/Redoc/redoc.spec.js

@@ -5,13 +5,14 @@ import {Component, ViewMetadata, provide} from '@angular/core';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
-  TestComponentBuilder,
   inject,
   async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import Redoc from 'lib/components/Redoc/redoc';
 import SchemaManager from 'lib/utils/SchemaManager';

lib/components/RequestSamples/request-samples.html

@@ -1,8 +1,8 @@
-<header *ngIf="data.bodySchemaPtr || data.samples.length"> Request samples </header>
-<schema-sample *ngIf="!data.samples.length" [pointer]="data.bodySchemaPtr"> </schema-sample>
+<header *ngIf="data.schemaPointer || data.samples.length"> Request samples </header>
+<schema-sample *ngIf="!data.samples.length" [pointer]="data.schemaPointer"> </schema-sample>
 <tabs *ngIf="data.samples.length" (change)=changeLangNotify($event)>
   <tab tabTitle="JSON">
-    <schema-sample [pointer]="data.bodySchemaPtr"> </schema-sample>
+    <schema-sample [pointer]="data.schemaPointer"> </schema-sample>
   </tab>
   <tab *ngFor="let sample of data.samples" [tabTitle]="sample.lang">
     <pre innerHtml="{{sample.source | prism:sample.lang}}"></pre>

lib/components/RequestSamples/request-samples.js

@@ -1,49 +1,50 @@
 'use strict';
 
-import {ViewChildren, QueryList, ChangeDetectorRef, ChangeDetectionStrategy} from '@angular/core';
+import { forwardRef, ViewChildren, QueryList } from '@angular/core';
 
-import {RedocComponent, BaseComponent, SchemaManager} from '../base';
+import { RedocComponent, BaseComponent, SchemaManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import {Tabs, Tab} from '../../common/components/Tabs/tabs';
-import SchemaSample from '../SchemaSample/schema-sample';
-import {PrismPipe} from '../../utils/pipes';
-import {redocEvents} from '../../events';
+import { Tabs, Tab } from '../..//shared/components/index';
+import { SchemaSample } from '../index';
+import { PrismPipe } from '../../utils/pipes';
+import { RedocEventsService } from '../../services/index';
 
 @RedocComponent({
   selector: 'request-samples',
   templateUrl: './lib/components/RequestSamples/request-samples.html',
   styleUrls: ['./lib/components/RequestSamples/request-samples.css'],
-  directives: [SchemaSample, Tabs, Tab],
-  inputs: ['bodySchemaPtr'],
-  pipes: [PrismPipe],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  directives: [forwardRef(() =>SchemaSample), Tabs, Tab],
+  inputs: ['schemaPointer'],
+  pipes: [PrismPipe]
 })
-@Reflect.metadata('parameters', [[SchemaManager], [new ViewChildren(Tabs), QueryList], [ChangeDetectorRef]])
-export default class RequestSamples extends BaseComponent {
-  constructor(schemaMgr, tabs, changeDetector) {
+@Reflect.metadata('parameters', [[SchemaManager], [RedocEventsService], [new ViewChildren(Tabs), QueryList]])
+export class RequestSamples extends BaseComponent {
+  constructor(schemaMgr, events, childQuery) {
     super(schemaMgr);
-    tabs.changes.subscribe(_ => {
-      this.tabs = tabs.first;
-      this.subscribeForEvents(_);
+    childQuery.changes.subscribe(() => {
+      this.childTabs = childQuery.first;
     });
-    this.changeDetector = changeDetector;
+    this.events = events;
+  }
+
+  init() {
+    this.subscribeForEvents();
   }
 
   changeLangNotify(lang) {
-    redocEvents.samplesLanguageChanged.next(lang);
+    this.events.samplesLanguageChanged.next(lang);
   }
 
   subscribeForEvents() {
-    if (!this.tabs) return;
-    redocEvents.samplesLanguageChanged.subscribe((sampleLang) => {
-      this.tabs.selectyByTitle(sampleLang);
-      this.changeDetector.markForCheck();
+    this.events.samplesLanguageChanged.subscribe((sampleLang) => {
+      if (!this.childTabs) return;
+      this.childTabs.selectyByTitle(sampleLang);
     });
   }
 
   prepareModel() {
     this.data = {};
-    this.data.bodySchemaPtr = JsonPointer.join(this.bodySchemaPtr, 'schema');
+    this.data.schemaPointer = JsonPointer.join(this.schemaPointer, 'schema');
     this.data.samples = this.componentSchema['x-code-samples'] || [];
   }
 }

lib/components/RequestSamples/request-samples.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 header {
     font-family: $headers-font;

lib/components/ResponsesList/responses-list.js

@@ -2,9 +2,8 @@
 
 import {RedocComponent, BaseComponent, SchemaManager} from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import JsonSchema from '../JsonSchema/json-schema';
-import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
-import Zippy from '../../common/components/Zippy/zippy';
+import { JsonSchema, JsonSchemaLazy } from '../index';
+import {Zippy} from '../../shared/components/index';
 import {statusCodeType} from '../../utils/helpers';
 import OptionsManager from '../../options';
 
@@ -19,7 +18,7 @@ function isNumeric(n) {
   directives: [JsonSchema, Zippy, JsonSchemaLazy]
 })
 @Reflect.metadata('parameters', [[SchemaManager], [OptionsManager]])
-export default class ResponsesList extends BaseComponent {
+export class ResponsesList extends BaseComponent {
   constructor(schemaMgr, optionsMgr) {
     super(schemaMgr);
     this.options = optionsMgr.options;

lib/components/ResponsesList/responses-list.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 .responses-list-header {
   font-size: 18px;

lib/components/ResponsesSamples/responses-samples.js

@@ -1,10 +1,11 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
+import { forwardRef } from '@angular/core';
+import { RedocComponent, BaseComponent } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import {Tabs, Tab} from '../../common/components/Tabs/tabs';
-import SchemaSample from '../SchemaSample/schema-sample';
-import {statusCodeType} from '../../utils/helpers';
+import { Tabs, Tab } from '../../shared/components/index';
+import { SchemaSample } from '../index';
+import { statusCodeType } from '../../utils/helpers';
 
 
 function isNumeric(n) {
@@ -20,9 +21,9 @@ function hasExample(response) {
   selector: 'responses-samples',
   templateUrl: './lib/components/ResponsesSamples/responses-samples.html',
   styleUrls: ['./lib/components/ResponsesSamples/responses-samples.css'],
-  directives: [SchemaSample, Tabs, Tab]
+  directives: [forwardRef( ()=> SchemaSample), Tabs, Tab]
 })
-export default class ResponsesSamples extends BaseComponent {
+export class ResponsesSamples extends BaseComponent {
   constructor(schemaMgr) {
     super(schemaMgr);
   }

lib/components/ResponsesSamples/responses-samples.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 tab, tabs {
     display: block;

lib/components/SchemaSample/schema-sample.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import {ElementRef} from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 import SchemaSampler from 'json-schema-instantiator';
 
-import {JsonFormatter} from '../../utils/JsonFormatterPipe';
-import {RedocComponent, BaseComponent, SchemaManager} from '../base';
+import { RedocComponent, BaseComponent, SchemaManager } from '../base';
+import { JsonFormatter } from '../../utils/JsonFormatterPipe';
 
 @RedocComponent({
   selector: 'schema-sample',
@@ -14,7 +14,7 @@ import {RedocComponent, BaseComponent, SchemaManager} from '../base';
   styleUrls: ['./lib/components/SchemaSample/schema-sample.css']
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
-export default class SchemaSample extends BaseComponent {
+export class SchemaSample extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
     this.element = elementRef.nativeElement;

lib/components/SchemaSample/schema-sample.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 
 pre {
   background-color: transparent;

lib/components/SideMenu/side-menu.html

@@ -1,11 +1,11 @@
-<div class="mobile-nav" (click)="toggleMobileNav()">
+<div #mobile class="mobile-nav" (click)="toggleMobileNav()">
   <span class="menu-header"> API Reference: </span>
   <span class="selected-item-info">
     <span class="selected-tag"> {{activeCatCaption}} </span>
     <span class="selected-endpoint">{{activeItemCaption}}</span>
   </span>
 </div>
-<div id="resources-nav">
+<div #desktop id="resources-nav">
   <h5 class="menu-header"> API reference </h5>
   <div *ngFor="let cat of data.menu; let idx = index" class="menu-cat">
 

lib/components/SideMenu/side-menu.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import {ElementRef} from '@angular/core';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
-import {global} from '@angular/core/src/facade/lang';
+import { ElementRef } from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import { global } from '@angular/core/src/facade/lang';
 
-import {RedocComponent, BaseComponent, SchemaManager} from '../base';
-import {redocEvents} from '../../events';
+import { RedocComponent, BaseComponent, SchemaManager } from '../base';
+import { RedocEventsService } from '../../services/index';
 import OptionsManager from '../../options';
 
 const CHANGE = {
@@ -26,9 +26,9 @@ const INVIEW_POSITION = {
   styleUrls: ['./lib/components/SideMenu/side-menu.css']
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef],
-  [BrowserDomAdapter],  [OptionsManager]])
-export default class SideMenu extends BaseComponent {
-  constructor(schemaMgr, elementRef, dom, optionsMgr) {
+  [BrowserDomAdapter], [OptionsManager], [RedocEventsService]])
+export class SideMenu extends BaseComponent {
+  constructor(schemaMgr, elementRef, dom, optionsMgr, events) {
     super(schemaMgr);
     this.$element = elementRef.nativeElement;
     this.dom = dom;
@@ -39,14 +39,14 @@ export default class SideMenu extends BaseComponent {
     this.activeMethodIdx = -1;
     this.prevOffsetY = null;
 
-    redocEvents.bootstrapped.subscribe(() => this.hashScroll());
+    this.events = events;
 
     this.activeCatCaption = '';
     this.activeItemCaption = '';
   }
 
-
   init() {
+    this.events.bootstrapped.subscribe(() => this.hashScroll());
     this.bindEvents();
     this.$mobileNav = this.dom.querySelector(this.$element, '.mobile-nav');
     this.$resourcesNav = this.dom.querySelector(this.$element, '#resources-nav');

lib/components/SideMenu/side-menu.scss

@@ -1,4 +1,4 @@
-@import '../../common/styles/variables';
+@import '../../shared/styles/variables';
 $mobile-menu-compact-breakpoint: 550px;
 
 .menu-header {

lib/components/SideMenu/side-menu.spec.js

@@ -6,13 +6,14 @@ import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_a
 import OptionsManager from 'lib/options';
 
 import {
-  TestComponentBuilder,
   inject,
   async,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import {redocEvents} from 'lib/events';
 import MethodsList from 'lib/components/MethodsList/methods-list';

lib/components/base.js

@@ -1,9 +1,9 @@
 'use strict';
-import {Component, ChangeDetectionStrategy} from '@angular/core';
-import {CORE_DIRECTIVES, JsonPipe, AsyncPipe} from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CORE_DIRECTIVES, JsonPipe, AsyncPipe } from '@angular/common';
 import SchemaManager from '../utils/SchemaManager';
 import JsonPointer from '../utils/JsonPointer';
-import {MarkedPipe, JsonPointerEscapePipe} from '../utils/pipes';
+import { MarkedPipe, JsonPointerEscapePipe } from '../utils/pipes';
 
 export { SchemaManager };
 

lib/components/index.js

@@ -1,42 +1,15 @@
 'use strict';
 
-import ApiInfo from './ApiInfo/api-info';
-import ApiLogo from './ApiLogo/api-logo';
-import Method from './Method/method.js';
-import MethodsList from './MethodsList/methods-list';
-import ParamsList from './ParamsList/params-list';
-import Redoc from './Redoc/redoc';
-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 JsonSchema from './JsonSchema/json-schema';
-
-const REDOC_COMPONENTS = [
-  ApiInfo,
-  ApiLogo,
-  JsonSchema,
-  Method,
-  MethodsList,
-  ParamsList,
-  Redoc,
-  ResponsesList,
-  ResponsesSamples,
-  SchemaSample,
-  SideMenu
-];
-
-export {
-  ApiInfo,
-  ApiLogo,
-  JsonSchema,
-  Method,
-  MethodsList,
-  ParamsList,
-  Redoc,
-  ResponsesList,
-  ResponsesSamples,
-  SchemaSample,
-  SideMenu,
-  REDOC_COMPONENTS
-};
+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 './Method/method';
+export * from './MethodsList/methods-list';
+export * from './Redoc/redoc';

lib/events.js

@@ -1,10 +0,0 @@
-'use strict';
-
-import {EventEmitter} from '@angular/core';
-
-var bootsrEmmiter = new EventEmitter();
-var langChanged = new EventEmitter();
-export var redocEvents = {
-  bootstrapped: bootsrEmmiter,
-  samplesLanguageChanged: langChanged
-};

lib/services/events.service.js

@@ -0,0 +1,10 @@
+'use strict';
+
+import {EventEmitter} from '@angular/core';
+
+export class RedocEventsService {
+  constructor() {
+    this.bootstrapped = new EventEmitter();
+    this.samplesLanguageChanged = new EventEmitter();
+  }
+}

lib/services/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+export * from './events.service.js';

lib/shared/components/DropDown/drop-down.js

@@ -14,7 +14,7 @@ import 'Robdel12/DropKick/build/css/dropkick.css!css';
     </select>
   `,
   directives: [CORE_DIRECTIVES],
-  styleUrls: ['./lib/common/components/DropDown/dropdown.css']
+  styleUrls: ['./lib/shared/components/DropDown/drop-down.css']
 })
 @Reflect.metadata('parameters', [[ElementRef]])
 export class DropDown {

lib/shared/components/StickySidebar/sticky-sidebar.js

@@ -8,7 +8,7 @@ import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_a
   inputs: ['scrollParent', 'scrollYOffset']
 })
 @Reflect.metadata('parameters', [[ElementRef], [BrowserDomAdapter]])
-export default class StickySidebar {
+export class StickySidebar {
   constructor(elementRef, dom) {
     this.$element = elementRef.nativeElement;
     this.dom = dom;

lib/shared/components/StickySidebar/sticky-sidebar.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
 import { getChildDebugElementByType } from 'tests/helpers';
-import {Component, provide} from '@angular/core';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import { Component, provide } from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
   TestComponentBuilder,
@@ -12,7 +12,7 @@ import {
   it
 } from '@angular/testing';
 
-import StickySidebar from 'lib/common/components/StickySidebar/sticky-sidebar';
+import { StickySidebar } from 'lib/shared/components/index';
 
 describe('Common components', () => {
   describe('StickySidebar Component', () => {

lib/shared/components/Tabs/tabs.js

@@ -14,7 +14,7 @@ import {CORE_DIRECTIVES} from '@angular/common';
     <ng-content></ng-content>
   `,
   directives: [CORE_DIRECTIVES],
-  styleUrls: ['./lib/common/components/Tabs/tabs.css']
+  styleUrls: ['./lib/shared/components/Tabs/tabs.css']
 })
 export class Tabs {
   constructor() {

lib/shared/components/Tabs/tabs.spec.js

@@ -10,7 +10,7 @@ import {
   it
 } from '@angular/testing';
 
-import {Tabs, Tab} from 'lib/common/components/Tabs/tabs';
+import {Tabs, Tab} from 'lib/shared/components/index';
 
 describe('Common components', () => {
   describe('Tabs Component', () => {

lib/shared/components/Zippy/zippy.js

@@ -7,11 +7,11 @@ import {CORE_DIRECTIVES} from '@angular/common';
   selector: 'zippy',
   events: ['open', 'close'],
   inputs: ['title', 'visible', 'type', 'empty'],
-  templateUrl: './lib/common/components/Zippy/zippy.html',
-  styleUrls: ['./lib/common/components/Zippy/zippy.css'],
+  templateUrl: './lib/shared/components/Zippy/zippy.html',
+  styleUrls: ['./lib/shared/components/Zippy/zippy.css'],
   directives: [CORE_DIRECTIVES]
 })
-export default class Zippy {
+export class Zippy {
 
   constructor() {
     this.type = 'general';

lib/shared/components/Zippy/zippy.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
 import { getChildDebugElement, mouseclick } from 'tests/helpers';
-import {Component} from '@angular/core';
 
+import { Component } from '@angular/core';
 import {
   TestComponentBuilder,
   inject,
@@ -10,7 +10,7 @@ import {
   it
 } from '@angular/testing';
 
-import Zippy from 'lib/common/components/Zippy/zippy';
+import { Zippy } from 'lib/shared/components/index';
 
 describe('Common components', () => {
   describe('Zippy Component', () => {

lib/shared/components/index.js

@@ -0,0 +1,5 @@
+'use strict';
+export * from './DropDown/drop-down';
+export * from './StickySidebar/sticky-sidebar';
+export * from './Tabs/tabs';
+export * from './Zippy/zippy';

package.json

@@ -69,6 +69,9 @@
         "map": {
           "http": "npm:stream-http@2.3.0"
         }
+      },
+      "npm:@angular/core@2.0.0-rc.1": {
+        "format": "esm"
       }
     }
   },

system.config.js

@@ -149,7 +149,6 @@ System.config({
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
     "npm:@angular/core@2.0.0-rc.1": {
-      "process": "github:jspm/nodelibs-process@0.1.2",
       "rxjs": "npm:rxjs@5.0.0-beta.6",
       "zone.js": "npm:zone.js@0.6.12"
     },

tests/helpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {By} from 'angular2/platform/browser';
+import {By} from '@angular/platform-browser';
 
 /** Gets a child DebugElement by tag name. */
 export function getChildDebugElement(parent, tagName) {