Angular 6 migration (#132)

* Successfully migrates

* updates environment and package command

web/.angular-cli.json

@@ -1,62 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "gocryptotrader-web"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico",
-        "favicon.png",
-        "favicon.256x256.png"
-      ],
-      "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": {}
-  }
-}

web/angular.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "gocryptotrader-web": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/favicon.png",
+              "src/favicon.256x256.png"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "gocryptotrader-web:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "gocryptotrader-web:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "gocryptotrader-web:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/favicon.png",
+              "src/favicon.256x256.png"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "gocryptotrader-web-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "gocryptotrader-web:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "gocryptotrader-web",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

web/karma.conf.js

@@ -4,33 +4,31 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
-      { pattern: './src/test.ts', watched: false }
+      
     ],
     preprocessors: {
-      './src/test.ts': ['@angular/cli']
+      
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
+    
-      environment: 'dev'
-    },
     reporters: config.angularCli && config.angularCli.codeCoverage
               ? ['progress', 'coverage-istanbul']
               : ['progress', 'kjhtml'],

web/package.json

@@ -41,27 +41,30 @@
         "pree2e:build": "webdriver-manager update --gecko false && npm run ng serve",
         "pree2e:protractor": "wait-on http-get://localhost:4200/ && protractor ./protractor.conf.js",
         "e2e": "npm-run-all -p -r pree2e:build pree2e:protractor",
-        "start:web": "ng serve -o"
+        "start:web": "ng serve --o"
     },
     "dependencies": {
-        "node-sass": "^4.9.0"
+        "node-sass": "^4.9.0",
+        "rxjs-compat": "^6.2.0",
+        "rxjs-tslint": "^0.1.4"
     },
     "devDependencies": {
         "@amcharts/amcharts3-angular": "2.1.0",
-        "@angular/animations": "5.2.9",
+        "@angular-devkit/build-angular": "~0.6.8",
-        "@angular/cdk": "5.2.5",
+        "@angular/animations": "6.0.4",
-        "@angular/cli": "1.7.4",
+        "@angular/cdk": "6.2.1",
-        "@angular/common": "5.2.9",
+        "@angular/cli": "6.0.8",
-        "@angular/compiler": "5.2.9",
+        "@angular/common": "6.0.4",
-        "@angular/compiler-cli": "5.2.9",
+        "@angular/compiler": "6.0.4",
-        "@angular/core": "5.2.9",
+        "@angular/compiler-cli": "6.0.4",
-        "@angular/forms": "5.2.9",
+        "@angular/core": "6.0.4",
-        "@angular/http": "5.2.9",
+        "@angular/forms": "6.0.4",
-        "@angular/language-service": "5.2.9",
+        "@angular/http": "6.0.4",
-        "@angular/material": "5.2.5",
+        "@angular/language-service": "6.0.4",
-        "@angular/platform-browser": "5.2.9",
+        "@angular/material": "6.2.1",
-        "@angular/platform-browser-dynamic": "5.2.9",
+        "@angular/platform-browser": "6.0.4",
-        "@angular/router": "5.2.9",
+        "@angular/platform-browser-dynamic": "6.0.4",
+        "@angular/router": "6.0.4",
         "@ngx-translate/core": "9.1.1",
         "@ngx-translate/http-loader": "2.0.1",
         "@types/core-js": "0.9.36",
@@ -81,18 +84,16 @@
         "karma": "^2.0.2",
         "karma-chrome-launcher": "2.2.0",
         "karma-coverage-istanbul-reporter": "1.4.2",
-        "karma-jasmine": "1.1.1",
-        "karma-jasmine-html-reporter": "0.2.2",
         "npm-run-all": "4.1.2",
         "npx": "^10.2.0",
         "protractor": "^5.3.2",
         "replace": "0.3.0",
-        "rxjs": "5.5.8",
+        "rxjs": "^6.2.0",
         "ts-node": "4.1.0",
-        "tslint": "5.9.1",
+        "tslint": "^5.9.1",
-        "typescript": "2.6.2",
+        "typescript": "2.7.2",
         "wait-on": "2.1.0",
         "webdriver-manager": "12.0.6",
-        "zone.js": "0.8.26"
+        "zone.js": "^0.8.26"
     }
 }

web/src/app/services/websocket-response-handler/websocket-response-handler.service.ts

@@ -1,3 +1,5 @@
+
+import {share, map} from 'rxjs/operators';
 import { NgModule, Injectable, Optional, SkipSelf } from '@angular/core';
 import { Observable, Subject } from 'rxjs/Rx';
 import { WebsocketService } from './../../services/websocket/websocket.service';
@@ -16,9 +18,9 @@ export class WebsocketResponseHandlerService {
 	constructor(@Optional() @SkipSelf() parentModule: WebsocketResponseHandlerService, wsService: WebsocketService) {
 		this.ws = wsService;
 		this.messages = <Subject<WebSocketMessage>>this.ws
-			.connect(WEBSOCKET_URL)
+			.connect(WEBSOCKET_URL).pipe(
 
-			.map((response: MessageEvent): WebSocketMessage => {
+			map((response: MessageEvent): WebSocketMessage => {
 				var interval = setInterval(() => {
 					this.isConnected = this.ws.isConnected;
 				}, 2000);
@@ -34,9 +36,9 @@ export class WebsocketResponseHandlerService {
 				responseMessage.error = websocketResponseMessage.error;
 
 				return responseMessage;
-			});
+			}));
 			this.isConnected = this.ws.isConnected;
 			
-		this.shared = this.messages.share(); //multicast
+		this.shared = this.messages.pipe(share()); //multicast
 	}
 }

web/src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const CONF_PROD = {
+  production: true,
+  environment: 'PROD'
+};

web/src/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

web/tslint.json

@@ -1,8 +1,13 @@
 {
   "rulesDirectory": [
-    "node_modules/codelyzer"
+    "node_modules/codelyzer",
+	"node_modules/rxjs-tslint"
   ],
   "rules": {
+    "rxjs-collapse-imports": true,
+    "rxjs-pipeable-operators-only": true,
+    "rxjs-no-static-observable-methods": true,
+    "rxjs-proper-imports": true,
     "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
@@ -18,7 +23,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,