chore: upgrade to angular 4.x

lib/app.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { RedocModule } from './redoc.module';
 import { Redoc } from './components/index';
 
 @NgModule({
-  imports: [ BrowserModule, RedocModule ],
+  imports: [ BrowserModule, BrowserAnimationsModule, RedocModule ],
   bootstrap: [ Redoc ],
   exports: [ Redoc ]
 })

lib/components/JsonSchema/json-schema.html

@@ -1,5 +1,5 @@
 <ng-container [ngSwitch]="schema._widgetType">
-  <template ngSwitchCase="file">
+  <ng-template ngSwitchCase="file">
     <span class="param-wrap">
       <span class="param-type-file">file</span>
       <div *ngIf="schema._produces && !isRequestSchema" class="file produces">
@@ -13,8 +13,8 @@
         </ul>
       </div>
     </span>
-  </template>
+  </ng-template>
-  <template ngSwitchCase="trivial">
+  <ng-template ngSwitchCase="trivial">
     <span class="param-wrap">
       <span class="param-type param-type-trivial {{schema.type}}"
         [ngClass]="{'with-hint': schema._displayTypeHint, 'array': _isArray}"
@@ -27,10 +27,10 @@
       </div>
       <span *ngIf="schema.pattern" class="param-pattern">{{schema.pattern}}</span>
     </span>
-  </template>
+  </ng-template>
-  <template ngSwitchCase="tuple">
+  <ng-template ngSwitchCase="tuple">
     <div class="params-wrap params-array array-tuple">
-      <template ngFor [ngForOf]="schema.items" let-item="$implicit" let-idx="index" [ngForTrackBy]="trackByIdx">
+      <ng-template ngFor [ngForOf]="schema.items" let-item="$implicit" let-idx="index" [ngForTrackBy]="trackByIdx">
         <div class="tuple-item">
           <span class="tuple-item-index"> [{{idx}}]: </span>
           <json-schema class="nested-schema" [pointer]="item._pointer"
@@ -38,17 +38,17 @@
           [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema">
           </json-schema>
         </div>
-      </template>
+      </ng-template>
     </div>
-  </template>
+  </ng-template>
-  <template ngSwitchCase="array">
+  <ng-template ngSwitchCase="array">
     <json-schema class="nested-schema" [pointer]="schema._pointer"
     [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema"> </json-schema>
-  </template>
+  </ng-template>
-  <template ngSwitchCase="object">
+  <ng-template ngSwitchCase="object">
     <table class="params-wrap" [ngClass]="{'params-array': _isArray}">
       <!-- <caption> {{_displayType}} </caption> -->
-      <template ngFor [ngForOf]="properties" let-prop="$implicit" let-last="last" [ngForTrackBy]="trackByName">
+      <ng-template ngFor [ngForOf]="properties" let-prop="$implicit" let-last="last" [ngForTrackBy]="trackByName">
         <tr class="param" [ngClass]="{'last': last,
             'discriminator': prop.isDiscriminator,
             'complex': prop._pointer,
@@ -100,8 +100,8 @@
             </zippy>
           </td>
         </tr>
-      </template>
+      </ng-template>
     </table>
-  </template>
+  </ng-template>
 
 </ng-container>

lib/components/ParamsList/params-list.html

@@ -1,5 +1,5 @@
 <h5 class="param-list-header" *ngIf="params.length"> Parameters </h5>
-<template ngFor [ngForOf]="params" let-paramType="$implicit">
+<ng-template ngFor [ngForOf]="params" let-paramType="$implicit">
   <header class="paramType">
     {{paramType.place}} Parameters
     <span class="hint--top-right hint--large" [attr.data-hint]="paramType.placeHint">?</span>
@@ -30,7 +30,7 @@
         </div>
     </div>
   </div>
-</template>
+</ng-template>
 
 <div *ngIf="bodyParam">
   <h5 class="param-list-header" *ngIf="bodyParam"> Request Body </h5>

lib/components/Search/redoc-search.html

@@ -1,5 +1,5 @@
 <div class="search-input-wrap">
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
     <path d="M968.2,849.4L667.3,549c83.9-136.5,66.7-317.4-51.7-435.6C477.1-25,252.5-25,113.9,113.4c-138.5,138.3-138.5,362.6,0,501C219.2,730.1,413.2,743,547.6,666.5l301.9,301.4c43.6,43.6,76.9,14.9,104.2-12.4C981,928.3,1011.8,893,968.2,849.4z M524.5,522c-88.9,88.7-233,88.7-321.8,0c-88.9-88.7-88.9-232.6,0-321.3c88.9-88.7,233-88.7,321.8,0C613.4,289.4,613.4,433.3,524.5,522z"/>
   </svg>
   <input #search (keyup)="update($event, search.value)" [value]="searchTerm" placeholder="Search">

lib/components/SecurityDefinitions/security-definitions.html

@@ -11,7 +11,7 @@
       <th> {{def.details.in}} parameter name:</th>
       <td> {{def.details.name}} </td>
     </tr>
-    <template [ngIf]="def.details.type === 'oauth2'">
+    <ng-template [ngIf]="def.details.type === 'oauth2'">
       <tr>
         <th> OAuth2 Flow</th>
         <td> {{def.details.flow}} </td>
@@ -24,9 +24,9 @@
         <th> Token URL </th>
         <td> {{def.details.tokenUrl}} </td>
       </tr>
-    </template>
+    </ng-template>
   </table>
-  <template [ngIf]="def.details.type === 'oauth2'">
+  <ng-template [ngIf]="def.details.type === 'oauth2'">
     <h3> OAuth2 Scopes </h3>
     <table class="security-scopes-details">
       <tr *ngFor="let scopeName of def.details.scopes | keys">
@@ -34,5 +34,5 @@
         <td> {{def.details.scopes[scopeName]}} </td>
       </tr>
     </table>
-  </template>
+  </ng-template>
 </div>

lib/index.ts

@@ -15,7 +15,6 @@ if (AOT) {
 }
 
 if (IS_PRODUCTION) {
-  disableDebugTools();
   enableProdMode();
 }
 
@@ -35,6 +34,7 @@ export function init(specUrlOrSpec:string|any, options:any = {}) {
   return bootstrapRedoc()
   .then(appRef => {
     moduleRef = appRef;
+    if (IS_PRODUCTION) disableDebugTools();
     console.log('ReDoc initialized!');
   }).catch(err => {
     throw err;

lib/redoc.module.ts

@@ -19,6 +19,7 @@ import {
   Marker,
   SearchService,
   COMPONENT_PARSER_ALLOWED } from './services/';
+
 import { SpecManager } from './utils/spec-manager';
 
 @NgModule({

lib/services/content-projector.service.ts

@@ -4,7 +4,7 @@ import {
   Injectable,
   ComponentFactory,
   ComponentRef,
-  ViewContainerRef
+  ViewContainerRef,
 } from '@angular/core';
 
 @Injectable()
@@ -19,6 +19,7 @@ export class ContentProjector {
     for (let i=0; i < projectedNodesOrComponents.length; i++) {
       let nodeOrCompRef = projectedNodesOrComponents[i];
       if (nodeOrCompRef instanceof ComponentRef) {
+        //nodeOrCompRef.changeDetectorRef.detectChanges();
         projectedNodes.push(nodeOrCompRef.location.nativeElement);
         componentRefs.push(nodeOrCompRef);
       } else {
@@ -29,13 +30,14 @@ export class ContentProjector {
     let parentCompRef = parentView.createComponent(componentFactory, null, contextInjector, [projectedNodes]);
 
     // using private property to get AppElement instance
-    let viewContainer = (<any>parentView)._element;
+    let viewContainer = (<any>parentView)._view;
-    viewContainer.nestedViews = viewContainer.nestedViews || [];
+    let viewData = (<any>parentView)._data;
+    viewData.embeddedViews = viewData.embeddedViews || [];
     for (let i=0; i < componentRefs.length; i++) {
       let compRef = componentRefs[i];
       // attach view to viewContainer change detector
-      viewContainer.nestedViews.push((<any>compRef.hostView).internalView);
+      viewData.embeddedViews.push((<any>compRef.hostView)._view);
-      (<any>compRef.hostView).internalView.viewContainer = viewContainer;
+      (<any>compRef.hostView).attachToViewContainerRef(viewContainer);
     }
     return parentCompRef;
   }

lib/services/schema-normalizer.service.ts

@@ -17,7 +17,6 @@ interface Schema {
   additionalProperties: any;
 }
 
-@Injectable()
 export class SchemaNormalizer {
   _dereferencer:SchemaDereferencer;
   constructor(_schema:any) {

lib/utils/md-renderer.ts

@@ -27,7 +27,6 @@ export interface MarkdownHeading {
   children?: StringMap<MarkdownHeading>;
 }
 
-@Injectable()
 export class MdRenderer {
   public headings: StringMap<MarkdownHeading> = {};
   currentTopHeading: MarkdownHeading;

package.json

@@ -18,13 +18,13 @@
     "unit": "karma start",
     "e2e": "npm run build:prod && npm run e2e-copy && npm run webdriver && protractor",
     "deploy": "node ./build/prepare_deploy.js && deploy-to-gh-pages --update demo",
-    "ngc": "ngc -p .",
+    "ngc": "ngc -p tsconfig.webpack.json",
     "clean:dist": "npm run rimraf -- dist/",
     "clean:aot": "npm run rimraf -- .tmp compiled lib/**/*.css",
     "rimraf": "rimraf",
     "webpack:prod": "webpack --config build/webpack.prod.js --profile --bail",
     "build:sass": "node-sass -q -o lib lib",
-    "build:prod": "npm run clean:aot && npm run build:sass && npm run webpack:prod",
+    "build:prod": "npm run clean:aot && npm run build:sass && npm run ngc && npm run webpack:prod",
     "build-dist": "npm run build:prod",
     "stats": "webpack --config build/webpack.prod.js --json > stats.json",
     "start": "webpack-dev-server --config build/webpack.dev.js --content-base demo",
@@ -48,29 +48,29 @@
   "author": "Roman Hotsiy",
   "license": "MIT",
   "devDependencies": {
-    "@angular/common": "^2.4.8",
+    "@angular/animations": "4.0.0-rc.3",
-    "@angular/compiler": "^2.4.8",
+    "@angular/common": "4.0.0-rc.3",
-    "@angular/compiler-cli": "^2.4.8",
+    "@angular/compiler": "4.0.0-rc.3",
-    "@angular/core": "^2.4.8",
+    "@angular/compiler-cli": "4.0.0-rc.3",
-    "@angular/platform-browser": "^2.4.8",
+    "@angular/core": "4.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "^2.4.8",
+    "@angular/platform-browser": "4.0.0-rc.3",
-    "@angular/platform-server": "^2.4.8",
+    "@angular/platform-browser-dynamic": "4.0.0-rc.3",
-    "@types/core-js": "^0.9.31",
+    "@angular/platform-server": "4.0.0-rc.3",
-    "@types/jasmine": "^2.5.43",
+    "@types/jasmine": "^2.5.45",
     "@types/requirejs": "^2.1.26",
     "@types/should": "^8.1.28",
-    "@types/swagger-schema-official": "^2.0.0",
+    "@types/swagger-schema-official": "^2.0.1",
-    "@types/webpack": "^2.2.6",
+    "@types/webpack": "^2.2.11",
     "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^3.0.6",
+    "awesome-typescript-loader": "^3.1.2",
     "branch-release": "^1.0.3",
     "chalk": "^1.1.3",
-    "codelyzer": "^2.0.1",
+    "codelyzer": "^3.0.0-beta.3",
-    "conventional-changelog-cli": "^1.2.0",
+    "conventional-changelog-cli": "^1.3.1",
     "core-js": "^2.4.1",
-    "coveralls": "^2.11.16",
+    "coveralls": "^2.12.0",
-    "css-loader": "^0.26.0",
+    "css-loader": "^0.27.3",
-    "deploy-to-gh-pages": "^1.1.2",
+    "deploy-to-gh-pages": "^1.3.3",
     "dropkickjs": "^2.1.10",
     "hint.css": "^2.3.2",
     "http-server": "^0.9.0",
@@ -85,41 +85,41 @@
     "karma-coveralls": "^1.1.2",
     "karma-jasmine": "^1.0.2",
     "karma-mocha-reporter": "^2.0.0",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-phantomjs-shim": "^1.1.2",
     "karma-remap-coverage": "^0.1.4",
     "karma-should": "^1.0.0",
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
+    "karma-webpack": "^2.0.3",
     "lunr": "^1.0.0",
     "mark.js": "github:julmot/mark.js",
-    "ngc-webpack": "^1.2.0",
     "node-sass": "^4.5.0",
-    "openapi-sampler": "^0.4.0",
+    "openapi-sampler": "^0.4.1",
     "phantomjs-prebuilt": "^2.1.7",
     "prismjs": "^1.5.1",
     "protractor": "^5.1.1",
     "raw-loader": "^0.5.1",
     "remarkable": "^1.6.2",
-    "rimraf": "^2.6.0",
+    "rimraf": "^2.6.1",
     "rxjs": "^5.2.0",
-    "sass-loader": "^6.0.2",
+    "sass-loader": "^6.0.3",
     "scrollparent": "^1.0.0",
-    "shelljs": "^0.7.0",
+    "shelljs": "^0.7.7",
-    "should": "^11.1.0",
+    "should": "^11.2.1",
-    "sinon": "^1.17.2",
+    "sinon": "^2.0.0",
     "slugify": "^1.0.2",
-    "source-map-loader": "^0.1.5",
+    "source-map-loader": "^0.2.0",
     "stream-http": "^2.6.1",
-    "string-replace-webpack-plugin": "0.0.5",
+    "string-replace-webpack-plugin": "^0.1.3",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.14.0",
     "ts-helpers": "^1.1.1",
-    "tslint": "^4.3.1",
+    "tslint": "^4.5.1",
-    "typescript": "^2.1.5",
+    "typescript": "^2.2.1",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1",
+    "webpack-dev-server": "^2.4.2",
-    "webpack-merge": "^3.0.0",
+    "webpack-merge": "^4.0.0",
-    "zone.js": "^0.7.7"
+    "zone.js": "0.7.2"
-  }
+  },
+  "dependencies": {}
 }