Fixed debugging on vs code

angular/angular-cli#2453

.vscode/launch.json

@@ -1,21 +1,31 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Launch Chrome against localhost, with sourcemaps",
-            "type": "chrome",
-            "request": "launch",
-            "url": "http://localhost:3000",
-            "sourceMaps": true,
-            "webRoot": "${workspaceRoot}"
-        },
-        {
-            "name": "Attach to Chrome, with sourcemaps",
-            "type": "chrome",
-            "request": "attach",
-            "port": 9222,
-            "sourceMaps": true,
-            "webRoot": "${workspaceRoot}"
-        }
-    ]
-}
+  "version": "0.2.0",
+  "configurations": [{
+    "name": "Launch Chrome against localhost, with sourcemaps",
+    "type": "chrome",
+    "request": "launch",
+    "url": "http://localhost:4200/",
+    "sourceMaps": true,
+    "webRoot": "${workspaceRoot}",
+    "sourceMapPathOverrides": {
+      "webpack:///C:*": "C:/*"
+    },
+    "runtimeArgs": [
+      "--disable-session-crashed-bubble",
+      "--disable-infobars"
+    ],
+    "diagnosticLogging": true
+  }, {
+    "name": "Attach to Chrome, with sourcemaps",
+    "type": "chrome",
+    "request": "attach",
+    "port": 9222,
+    "sourceMaps": true,
+    /*"diagnosticLogging": true,*/
+    "webRoot": "${workspaceRoot}",
+    "url": "http://localhost:4200/*",
+    "sourceMapPathOverrides": {
+      "webpack:///*": "/*"
+    }
+  }]
+}

package.json

@@ -27,17 +27,23 @@
     "@angular/platform-browser": "2.2.3",
     "@angular/platform-browser-dynamic": "2.2.3",
     "@angular/router": "3.2.3",
+
     "angular-in-memory-web-api": "~0.1.15",
     "ng2-charts": "~1.4.1",
     "chart.js": "~2.4.0",
+
+    "socket.io-client": "^1.7.1",
+
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14",
     "bootstrap": "^4.0.0-alpha.5",
+
     "systemjs": "0.19.40",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.26"
+
   },
   "devDependencies": {
     "concurrently": "^3.1.0",

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { HttpModule } from '@angular/http';
 import { DistributionService } from '../distribution-service/distribution.service'; 
 import { RandomService } from '../random-service/random.service';
 import { SocketService } from '../socket-service/socket.service';
@@ -17,6 +17,7 @@ import { WebsocketComponent } from '../websocket/websocket.component';
   imports: [
     BrowserModule,
     ChartsModule,
+    HttpModule,
     NgbModule.forRoot()
     ],
   declarations: [

src/assets/data.json

@@ -0,0 +1,9 @@
+{
+  "people": [{
+    "age": 40,
+    "name": "Jordan Houston"
+  }, {
+    "age": 38,
+    "name": "Robert Eastham"
+  } ]
+}

src/shared/rxjs-operators.ts

@@ -0,0 +1,15 @@
+// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
+
+// See node_module/rxjs/Rxjs.js
+// Import just the rxjs statics and operators needed for THIS app.
+
+// Statics
+import 'rxjs/add/observable/throw';
+
+// Operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/toPromise';

src/socket-service/socket.service.ts

@@ -1,7 +1,35 @@
 import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import '../shared/rxjs-operators';
 
 @Injectable()
 export class SocketService {
 
-    constructor() { }
+    constructor(private http: Http) { }
+
+    getData(): Observable<string> {
+        return this.http.get('./assets/data.json')
+            .map(this.extractData)
+            .catch(this.handleError);
+    }
+
+    private extractData(response: Response) {
+        const body = response.toString();
+        return body || {};
+    }
+
+    private handleError(error: Response | any) {
+        let errMsg: string;
+        if (error instanceof Response) {
+            const body = error.json() || '';
+            const err = body.error || JSON.stringify(body);
+            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+        } else {
+            errMsg = error.message ? error.message : error.toString();
+        }
+        console.error(errMsg);
+        return Observable.throw(errMsg);
+    }
 }

src/tsconfig.json

@@ -8,8 +8,8 @@
     "mapRoot": "./",
     "module": "es6",
     "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
     "sourceMap": true,
+    "outDir": "../dist/out-tsc",
     "target": "es5",
     "typeRoots": [
       "../node_modules/@types"

src/websocket/websocket.component.ts

@@ -1,15 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import { SocketService } from '../socket-service/socket.service';
 
 @Component({
     selector: 'websocket',
     templateUrl: './websocket.component.html'
 })
 export class WebsocketComponent implements OnInit {
     datablock: string = 'sdfsdf';
-    constructor() { }
+    constructor(private SocketService: SocketService) { }
 
     changeVal(): void {
-        this.datablock = 'value has been changed';
+        this.SocketService.getData().subscribe(
+            data => this.datablock = data,
+            error => { },
+        );
     }
     ngOnInit() { }
 }