Merge pull request #24 from avatao-content/angular6

Angular 6 upgrade

.angular-cli.json

@@ -1,62 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "tutorial-framework-ng"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        { "glob": "*(fonts|images|icons)/**/*",
-          "input": "./assets/",
-          "output": "./" }
-       ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {
-    }
-  }
-}

angular.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend-tutorial-framework": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              { "glob": "*(fonts|images|icons)/**/*",
+                "input": "src/assets/",
+                "output": "./" }
+             ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "frontend-tutorial-framework:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "frontend-tutorial-framework:build:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "frontend-tutorial-framework"
+}

package.json

@@ -12,49 +12,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "^6.0.2",
-    "@angular/common": "^5.2.0",
+    "@angular/common": "^6.0.2",
-    "@angular/compiler": "^5.2.0",
+    "@angular/compiler": "^6.0.2",
-    "@angular/core": "^5.2.0",
+    "@angular/core": "^6.0.2",
-    "@angular/forms": "^5.2.0",
+    "@angular/forms": "^6.0.2",
-    "@angular/http": "^5.2.0",
+    "@angular/http": "^6.0.2",
-    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser": "^6.0.2",
-    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^6.0.2",
-    "@angular/router": "^5.2.0",
+    "@angular/router": "^6.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
     "bootstrap": "^4.0.0",
     "brace": "^0.11.0",
     "classlist.js": "^1.1.20150312",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.4",
-    "ng2-ace-editor": "^0.3.4",
+    "ng2-ace-editor": "^0.3.7",
     "node-sass": "^4.7.2",
-    "queueing-subject": "^0.2.0",
+    "rxjs": "^6.0.0",
-    "rxjs": "^5.5.2",
+    "rxjs-compat": "^6.1.0",
     "rxjs-websockets": "^4.0.0",
     "showdown": "^1.8.5",
     "xterm": "^3.1.0",
-    "zone.js": "^0.8.14"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.3",
+    "@angular-devkit/build-angular": "^0.6.3",
-    "@angular/compiler-cli": "^5.2.0",
+    "@angular/cli": "^6.0.3",
-    "@angular/language-service": "^5.2.0",
+    "@angular/compiler-cli": "^6.0.2",
-    "@types/jasmine": "~2.5.53",
+    "@angular/language-service": "^6.0.2",
-    "@types/jasminewd2": "~2.0.2",
+    "@types/jasmine": "~2.8.6",
-    "@types/node": "~6.0.60",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "@types/showdown": "^1.7.2",
-    "codelyzer": "^4.0.1",
+    "codelyzer": "~4.2.1",
-    "jasmine-core": "~2.6.2",
+    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.1.0",
+    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.0",
+    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.1.1",
+    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.1",
-    "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "~5.3.0",
-    "ts-node": "~3.2.0",
+    "ts-node": "~5.0.1",
-    "tslint": "~5.7.0",
+    "tslint": "~5.9.1",
-    "typescript": "~2.6.2"
+    "typescript": "~2.7.2"
   }
-}
+}

src/app/dashboard/dashboard.component.ts

@@ -3,7 +3,7 @@
 
 import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
 import { DeploymentNotificationService } from '../services/deployment-notification.service';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { WebSocketService } from '../services/websocket.service';
 import { LayoutCommand } from './layout-command';
 import { config } from '../config';

src/app/services/deployment-notification.service.ts

@@ -2,7 +2,7 @@
 // All Rights Reserved. See LICENSE file for details.
 
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class DeploymentNotificationService {

src/app/services/queueing-subject.ts

@@ -0,0 +1,26 @@
+// Based on https://github.com/ohjames/queueing-subject
+
+import { Subject, Subscriber, Subscription } from 'rxjs';
+
+export class QueueingSubject<T> extends Subject<T> {
+  private queuedValues: T[] = [];
+
+  next(value: T): void {
+    if (this.closed || this.observers.length) {
+      super.next(value);
+    } else {
+      this.queuedValues.push(value);
+    }
+  }
+
+  _subscribe(subscriber: Subscriber<T>): Subscription {
+    const subscription = super._subscribe(subscriber);
+
+    if (this.queuedValues.length) {
+      this.queuedValues.forEach(value => super.next(value));
+      this.queuedValues.splice(0);
+    }
+
+    return subscription;
+  }
+}

src/app/services/websocket.service.ts

@@ -2,8 +2,8 @@
 // All Rights Reserved. See LICENSE file for details.
 
 import { Injectable } from '@angular/core';
-import { QueueingSubject } from 'queueing-subject';
+import { QueueingSubject } from './queueing-subject';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import websocketConnect from 'rxjs-websockets';
 import { filter, map, share } from 'rxjs/operators';
 import { WSMessage } from './wsmessage';

tslint.json

@@ -17,9 +17,7 @@
     "eofline": true,
     "forin": true,
     "import-blacklist": [
-      true,
+      true
-      "rxjs",
-      "rxjs/Rx"
     ],
     "import-spacing": true,
     "indent": [