Updated WebSPA to Angular 6, Bootstrap 4, HttpClient and new rxjs

src/Web/WebSPA/.angular-cli.json

@@ -1,59 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "WebSPA"
-  },
-  "apps": [
-    {
-      "root": "Client",
-      "outDir": "wwwroot",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "globals.scss",
-        "../node_modules/bootstrap/scss/bootstrap.scss",
-        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "Client/tsconfig.app.json"
-    },
-    {
-      "project": "Client/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
-}

src/Web/WebSPA/Client/globals.scss

@@ -1,4 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~bootstrap/scss/bootstrap";
+@import "~ngx-toastr/toastr-bs4-alert.scss";
+
 @import './modules/variables';
 
 $dist: './fonts/Montserrat-Regular';

src/Web/WebSPA/Client/modules/app.component.ts

@@ -1,19 +1,16 @@
 import { Title } from '@angular/platform-browser';
-import { Component, ViewEncapsulation, OnInit, ViewContainerRef } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Subscription }   from 'rxjs/Subscription';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 
-import { DataService } from './shared/services/data.service';
 import { SecurityService } from './shared/services/security.service';
 import { ConfigurationService } from './shared/services/configuration.service';
 import { SignalrService } from './shared/services/signalr.service';
-import { ToastsManager } from 'ng2-toastr';
+import { ToastrService } from 'ngx-toastr';
 
 /*
  * App Component
  * Top Level Component
  */
-
 @Component({
     selector: 'esh-app',
     styleUrls: ['./app.component.scss'],
@@ -27,10 +24,11 @@ export class AppComponent implements OnInit {
         private securityService: SecurityService,
         private configurationService: ConfigurationService,
         private signalrService: SignalrService,
-        private toastr: ToastsManager,
+        private toastr: ToastrService,
         vcr: ViewContainerRef
     ) {
-        this.toastr.setRootViewContainerRef(vcr);
+        // TODO: Set Taster Root (Overlay) container
+        //this.toastr.setRootViewContainerRef(vcr);
         this.Authenticated = this.securityService.IsAuthorized;
     }
 

src/Web/WebSPA/Client/modules/app.module.ts

@@ -1,35 +1,32 @@
-import { NgModule, NgModuleFactoryLoader } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule  } from '@angular/platform-browser';
-// import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from "@angular/common/http";
 
-import { routing }        from './app.routes';
+import { routing } from './app.routes';
 import { AppService } from './app.service';
 import { AppComponent } from './app.component';
-import { SharedModule }  from './shared/shared.module';
-import { CatalogModule }  from './catalog/catalog.module';
-import { OrdersModule }  from './orders/orders.module';
+import { SharedModule } from './shared/shared.module';
+import { CatalogModule } from './catalog/catalog.module';
+import { OrdersModule } from './orders/orders.module';
 import { BasketModule } from './basket/basket.module';
 import { CampaignsModule } from './campaigns/campaigns.module';
-import { ToastModule } from 'ng2-toastr/ng2-toastr';
-
+import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
     declarations: [AppComponent],
     imports: [
         BrowserAnimationsModule,
         BrowserModule,
-        ToastModule.forRoot(),
+        ToastrModule.forRoot(),
         routing,
-        HttpModule,
+        HttpClientModule,
         // Only module that app module loads
         SharedModule.forRoot(),
         CatalogModule,
         OrdersModule,
         BasketModule,
-        CampaignsModule        
+        CampaignsModule
     ],
     providers: [
         AppService

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit }    from '@angular/core';
-import { Subscription }         from 'rxjs/Subscription';
+import { Subscription }         from 'rxjs';
 
 import { BasketService }        from '../basket.service';
 import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';

src/Web/WebSPA/Client/modules/basket/basket.component.ts

@@ -1,9 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
+import { Observable } from 'rxjs';
 
 import { BasketService } from './basket.service';
 import { IBasket } from '../shared/models/basket.model';

src/Web/WebSPA/Client/modules/basket/basket.service.ts

@@ -1,5 +1,5 @@
 import { Injectable }               from '@angular/core';
-import { Response, Headers }        from '@angular/http';
+import { Response }                 from '@angular/http';
 import { Router }                   from '@angular/router';
 
 import { DataService }              from '../shared/services/data.service';
@@ -7,18 +7,12 @@ import { SecurityService }          from '../shared/services/security.service';
 import { IBasket } from '../shared/models/basket.model';
 import { IOrder } from '../shared/models/order.model';
 import { IBasketCheckout } from '../shared/models/basketCheckout.model';
-import { IBasketItem }              from '../shared/models/basketItem.model';
 import { BasketWrapperService }     from '../shared/services/basket.wrapper.service';
 import { ConfigurationService }     from '../shared/services/configuration.service';
 import { StorageService }           from '../shared/services/storage.service';
 
-import 'rxjs/Rx';
-import { Observable }               from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer }                 from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import { Subject }                  from 'rxjs/Subject';
+import { Observable, Observer, Subject }      from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 
 @Injectable()
 export class BasketService {
@@ -68,28 +62,27 @@ export class BasketService {
     setBasket(basket): Observable<boolean> {
         let url = this.purchaseUrl + '/api/v1/basket/';
         this.basket = basket;
-        return this.service.post(url, basket).map((response: Response) => {
+        return this.service.post(url, basket).pipe(map((response: Response) => {
             return true;
-        });
+        }));
     }
 
     setBasketCheckout(basketCheckout): Observable<boolean> {
         let url = this.basketUrl + '/api/v1/b/basket/checkout';
-        return this.service.postWithId(url, basketCheckout).map((response: Response) => {
+        return this.service.postWithId(url, basketCheckout).pipe(map((response: Response) => {
             this.basketEvents.orderCreated();
             return true;
-        });
+        }));
     }
 
     getBasket(): Observable<IBasket> {
         let url = this.basketUrl + '/api/v1/b/basket/' + this.basket.buyerId;
-        return this.service.get(url).map((response: Response) => {
+        return this.service.get(url).pipe(map((response: Response) => {
             if (response.status === 204) {
                 return null;
             }
-
             return response.json();
-        });
+        }));
     }    
 
     mapBasketInfoCheckout(order: IOrder): IBasketCheckout {

src/Web/WebSPA/Client/modules/campaigns/campaigns.component.ts

@@ -3,7 +3,8 @@ import { CampaignsService }        from './campaigns.service';
 import { ICampaign }               from '../shared/models/campaign.model';
 import { IPager }               from '../shared/models/pager.model';
 import { ConfigurationService } from '../shared/services/configuration.service';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 @Component({
     selector: 'esh-campaigns',
@@ -41,7 +42,7 @@ export class CampaignsComponent implements OnInit {
     getCampaigns(pageSize: number, pageIndex: number) {
         this.errorReceived = false;
         this.service.getCampaigns(pageIndex, pageSize)
-            .catch((err) => this.handleError(err))
+            .pipe(catchError((err) => this.handleError(err)))
             .subscribe(campaigns => {
                 this.campaigns = campaigns;
                 this.paginationInfo = {

src/Web/WebSPA/Client/modules/campaigns/campaigns.service.ts

@@ -7,13 +7,9 @@ import { ICampaignItem } from '../shared/models/campaignItem.model';
 import { SecurityService } from '../shared/services/security.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
 
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer } from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
-
-
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+    
 @Injectable()
 export class CampaignsService {
     private marketingUrl: string = '';
@@ -36,17 +32,17 @@ export class CampaignsService {
         let url = this.marketingUrl + '/api/v1/m/campaigns/user';
         url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
 
-        return this.service.get(url).map((response: Response) => {
+        return this.service.get(url).pipe(map((response: Response) => {
             return response.json();
-        });
+        }));
     }
 
     getCampaign(id: number): Observable<ICampaignItem> {
         let url = this.marketingUrl + '/api/v1/m/campaigns/' + id;
 
-        return this.service.get(url).map((response: Response) => {
+        return this.service.get(url).pipe(map((response: Response) => {
             return response.json();
-        });
+        }));
     }    
 }
 

src/Web/WebSPA/Client/modules/catalog/catalog.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit }    from '@angular/core';
-import { Subscription }         from 'rxjs/Subscription';
+import { Observable, Subscription } from 'rxjs';
+import { catchError }           from 'rxjs/operators';
 
 import { CatalogService }       from './catalog.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
@@ -10,7 +11,6 @@ import { ICatalogBrand }        from '../shared/models/catalogBrand.model';
 import { IPager }               from '../shared/models/pager.model';
 import { BasketWrapperService}  from '../shared/services/basket.wrapper.service';
 import { SecurityService }      from '../shared/services/security.service';
-import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'esh-catalog .esh-catalog',
@@ -83,7 +83,7 @@ export class CatalogComponent implements OnInit {
     getCatalog(pageSize: number, pageIndex: number, brand?: number, type?: number) {
         this.errorReceived = false;
         this.service.getCatalog(pageIndex, pageSize, brand, type)
-            .catch((err) => this.handleError(err))
+            .pipe(catchError((err) => this.handleError(err)))
             .subscribe(catalog => {
                 this.catalog = catalog;
                 this.paginationInfo = {

src/Web/WebSPA/Client/modules/catalog/catalog.service.ts

@@ -7,11 +7,8 @@ import { ICatalog } from '../shared/models/catalog.model';
 import { ICatalogBrand } from '../shared/models/catalogBrand.model';
 import { ICatalogType } from '../shared/models/catalogType.model';
 
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer } from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 
 @Injectable()
 export class CatalogService {
@@ -39,20 +36,29 @@ export class CatalogService {
       
         url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
 
-        return this.service.get(url).map((response: Response) => {
-            return response.json();
-        });
+        return this.service.get(url)
+            .pipe(
+                map((response: Response) => {
+                    return response;
+                })
+            );
     }
 
     getBrands(): Observable<ICatalogBrand[]> {
-        return this.service.get(this.brandUrl).map((response: Response) => {
-            return response.json();
-        });
+        return this.service.get(this.brandUrl)
+            .pipe(
+                map((response: Response) => {
+                    return response;
+                })
+            );
     }
 
     getTypes(): Observable<ICatalogType[]> {
-        return this.service.get(this.typesUrl).map((response: Response) => {
-            return response.json();
-        });
+        return this.service.get(this.typesUrl)
+            .pipe(
+                map((response: Response) => {
+                    return response;
+                })
+            );
     };
 }

src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
 import { OrdersService } from '../orders.service';
 import { BasketService } from '../../basket/basket.service';
 import { IOrder }                                   from '../../shared/models/order.model';
@@ -49,11 +51,11 @@ export class OrdersNewComponent implements OnInit {
         this.order.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value;
         let basketCheckout = this.basketService.mapBasketInfoCheckout(this.order);
         this.basketService.setBasketCheckout(basketCheckout)
-            .catch((errMessage) => {
+            .pipe(catchError((errMessage) => {
                 this.errorReceived = true;
                 this.isOrderProcessing = false;
                 return Observable.throw(errMessage); 
-            })
+            }))
             .subscribe(res => {
                 this.router.navigate(['orders']);
             });

src/Web/WebSPA/Client/modules/orders/orders.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit }    from '@angular/core';
 import { OrdersService }        from './orders.service';
 import { IOrder }               from '../shared/models/order.model';
 import { ConfigurationService } from '../shared/services/configuration.service';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 import { SignalrService } from '../shared/services/signalr.service';
 
 @Component({
@@ -35,7 +36,7 @@ export class OrdersComponent implements OnInit {
     getOrders() {
         this.errorReceived = false;
         this.service.getOrders()
-            .catch((err) => this.handleError(err))
+            .pipe(catchError((err) => this.handleError(err)))
             .subscribe(orders => {
                 this.orders = orders;
                 this.oldOrders = this.orders;

src/Web/WebSPA/Client/modules/orders/orders.service.ts

@@ -9,12 +9,8 @@ import { SecurityService } from '../shared/services/security.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
 import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
 
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer } from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
-
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class OrdersService {
@@ -31,17 +27,17 @@ export class OrdersService {
     getOrders(): Observable<IOrder[]> {
         let url = this.ordersUrl + '/api/v1/o/orders';
 
-        return this.service.get(url).map((response: Response) => {
+        return this.service.get(url).pipe(map((response: Response) => {
             return response.json();
-        });
+        }));
     }
 
     getOrder(id: number): Observable<IOrderDetail> {
         let url = this.ordersUrl + '/api/v1/o/orders/' + id;
 
-        return this.service.get(url).map((response: Response) => {
+        return this.service.get(url).pipe(map((response: Response) => {
             return response.json();
-        });
+        }));
     }
 
     mapOrderAndIdentityInfoNewOrder(): IOrder {

src/Web/WebSPA/Client/modules/shared/components/identity/identity.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { IIdentity } from '../../models/identity.model';
 import { SecurityService } from '../../services/security.service';

src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts

@@ -1,5 +1,5 @@
 import { Injectable }       from '@angular/core';
-import { Subject }          from 'rxjs/Subject';
+import { Subject }          from 'rxjs';
 
 import { ICatalogItem }     from '../models/catalogItem.model';
 import { IBasketItem }      from '../models/basketItem.model';

src/Web/WebSPA/Client/modules/shared/services/configuration.service.ts

@@ -3,13 +3,7 @@ import { Http, Response, RequestOptionsArgs, RequestMethod, Headers } from '@ang
 import { IConfiguration }   from '../models/configuration.model';
 import { StorageService }   from './storage.service';
 
-import 'rxjs/Rx';
-import { Observable }       from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer }         from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
-import { Subject }          from 'rxjs/Subject';
-
+import { Observable, Subject } from 'rxjs';
 
 @Injectable()
 export class ConfigurationService {

src/Web/WebSPA/Client/modules/shared/services/data.service.ts

@@ -1,12 +1,8 @@
 import { Injectable } from '@angular/core';
-import { Http, Response, RequestOptionsArgs, RequestMethod, Headers } from '@angular/http';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
 
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-import { Observer } from 'rxjs/Observer';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
+import { Observable, throwError } from 'rxjs';
+import { retry, map, catchError } from 'rxjs/operators';
 
 import { SecurityService } from './security.service';
 import { Guid } from '../../../guid';
@@ -15,20 +11,24 @@ import { Guid } from '../../../guid';
 // is pending to do for the SPA app
 @Injectable()
 export class DataService {
-    constructor(private http: Http, private securityService: SecurityService) { }
+    constructor(private http: HttpClient, private securityService: SecurityService) { }
 
     get(url: string, params?: any): Observable<Response> {
-        let options: RequestOptionsArgs = {};
+        let options = {};
 
         if (this.securityService) {
-            options.headers = new Headers();
-            options.headers.append('Authorization', 'Bearer ' + this.securityService.GetToken());
+            options["headers"] = new HttpHeaders();
+            options["headers"].append('Authorization', 'Bearer ' + this.securityService.GetToken());
         }
 
-        return this.http.get(url, options).map(
-            (res: Response) => {
-            return res;
-        }).catch(this.handleError);
+        return this.http.get(url, options)
+            .pipe(
+                // retry(3), // retry a failed request up to 3 times
+                map((res: Response) => {
+                    return res;
+                }),
+                catchError(this.handleError)
+            );
     }
 
     postWithId(url: string, data: any, params?: any): Observable<Response> {
@@ -44,70 +44,76 @@ export class DataService {
     }
 
     private doPost(url: string, data: any, needId: boolean, params?: any): Observable<Response> {
-        let options: RequestOptionsArgs = {};
+        let options = {};
 
-        options.headers = new Headers();
+        options["headers"] = new HttpHeaders();
         if (this.securityService) {
-            options.headers.append('Authorization', 'Bearer ' + this.securityService.GetToken());
+            options["headers"].append('Authorization', 'Bearer ' + this.securityService.GetToken());
         }
         if (needId) {
             let guid = Guid.newGuid();
-            options.headers.append('x-requestid', guid);
+            options["headers"].append('x-requestid', guid);
         }
 
-        return this.http.post(url, data, options).map(
-            (res: Response) => {
-                return res;
-            }).catch(this.handleError);
+        return this.http.post(url, data, options)
+            .pipe(
+                map((res: Response) => {
+                    return res;
+                }),
+                catchError(this.handleError)
+            );
     }
 
     private doPut(url: string, data: any, needId: boolean, params?: any): Observable<Response> {
-        let options: RequestOptionsArgs = {};
+        let options = {};
 
-        options.headers = new Headers();
+        options["headers"] = new HttpHeaders();
         if (this.securityService) {
-            options.headers.append('Authorization', 'Bearer ' + this.securityService.GetToken());
+            options["headers"].append('Authorization', 'Bearer ' + this.securityService.GetToken());
         }
         if (needId) {
             let guid = Guid.newGuid();
-            options.headers.append('x-requestid', guid);
+            options["headers"].append('x-requestid', guid);
         }
 
-        return this.http.put(url, data, options).map(
-            (res: Response) => {
-                return res;
-            }).catch(this.handleError);
+        return this.http.put(url, data, options)
+            .pipe(
+                map((res: Response) => {
+                    return res;
+                }),
+                catchError(this.handleError)
+            );
     }
 
     delete(url: string, params?: any) {
-        let options: RequestOptionsArgs = {};
+        let options = {};
 
         if (this.securityService) {
-            options.headers = new Headers();
-            options.headers.append('Authorization', 'Bearer ' + this.securityService.GetToken());
+            options["headers"] = new HttpHeaders();
+            options["headers"].append('Authorization', 'Bearer ' + this.securityService.GetToken());
         }
 
         console.log('data.service deleting');
-        // return this.http.delete(url, options).subscribe(
-        //        return res;
-        //    );
 
-        this.http.delete(url, options).subscribe((res) => {
-            console.log('deleted');
+        this.http.delete(url, options)
+            .subscribe((res) => {console.log('deleted');
         });
     }
 
     private handleError(error: any) {
-        console.error('server error:', error);
-        if (error instanceof Response) {
-            let errMessage = '';
-            try {
-                errMessage = error.json();
-            } catch (err) {
-                errMessage = error.statusText;
-            }
-            return Observable.throw(errMessage);
+        if (error.error instanceof ErrorEvent) {
+            // A client-side or network error occurred. Handle it accordingly.
+            console.error('Client side network error occurred:', error.message);
+        } else {
+            // The backend returned an unsuccessful response code.
+            // The response body may contain clues as to what went wrong,
+            console.error('Backend - ' +
+                `status: ${error.status}, ` +
+                `statusText: ${error.statusText}, ` +
+                `message: ${error.message}`);
         }
-        return Observable.throw(error || 'server error');
+
+        // return an observable with a user-facing error message
+        return throwError(error || 'server error');
     }
 }

src/Web/WebSPA/Client/modules/shared/services/security.service.ts

@@ -1,8 +1,7 @@
 import { Injectable }                   from '@angular/core';
 import { Http, Response, Headers }      from '@angular/http';
-import 'rxjs/add/operator/map';
-import { Observable }                   from 'rxjs/Observable';
-import { Subject }                      from 'rxjs/Subject';
+import { Observable, Subject }          from 'rxjs';
+import { map }                          from 'rxjs/operators';
 import { Router }                       from '@angular/router';
 import { ActivatedRoute }               from '@angular/router';
 import { ConfigurationService }         from './configuration.service';
@@ -227,7 +226,7 @@ export class SecurityService {
         return this._http.get(this.authorityUrl + '/connect/userinfo', {
             headers: this.headers,
             body: ''
-        }).map(res => res.json());
+        }).pipe(map(res => res.json()));
     }
 
     private setHeaders() {

src/Web/WebSPA/Client/modules/shared/services/signalr.service.ts

@@ -1,22 +1,20 @@
 import { Injectable } from '@angular/core';
 import { SecurityService } from './security.service';
 import { ConfigurationService } from './configuration.service';
-import { HubConnection, HttpConnection, TransportType } from '@aspnet/signalr';
-import { ToastsManager } from 'ng2-toastr/ng2-toastr';
+import { HubConnection, HubConnectionBuilder, LogLevel, HttpTransportType } from '@aspnet/signalr';
+import { ToastrService } from 'ngx-toastr';
 import { Subject } from 'rxjs';
 
 @Injectable()
 export class SignalrService {
-
     private _hubConnection: HubConnection;
-    private _httpConnection: HttpConnection;
     private SignalrHubUrl: string = '';
     private msgSignalrSource = new Subject();
     msgReceived$ = this.msgSignalrSource.asObservable();
 
     constructor(
         private securityService: SecurityService,
-        private configurationService: ConfigurationService, private toastr: ToastsManager,
+        private configurationService: ConfigurationService, private toastr: ToastrService,
     ) {
         if (this.configurationService.isReady) {
             this.SignalrHubUrl = this.configurationService.serverSettings.signalrHubUrl;
@@ -43,11 +41,13 @@ export class SignalrService {
     }
 
     private register() {
-        this._httpConnection = new HttpConnection(this.SignalrHubUrl + '/hub/notificationhub', {
-            transport: TransportType.LongPolling,
-            accessTokenFactory: () => this.securityService.GetToken()
-        });
-        this._hubConnection = new HubConnection(this._httpConnection);
+        this._hubConnection = new HubConnectionBuilder()
+            .withUrl(this.SignalrHubUrl + '/hub/notificationhub', {
+                transport: HttpTransportType.LongPolling,
+                accessTokenFactory: () => this.securityService.GetToken()
+            })
+            .configureLogging(LogLevel.Information)
+            .build();
     }
 
     private stablishConnection() {
@@ -66,5 +66,4 @@ export class SignalrService {
             this.msgSignalrSource.next();
         });
     }
-
 }

src/Web/WebSPA/Client/tsconfig.spec.json

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

src/Web/WebSPA/WebSPA.csproj

@@ -8,6 +8,7 @@
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <GeneratedItemPatterns>wwwroot/dist/**</GeneratedItemPatterns>
     <DefaultItemExcludes>$(DefaultItemExcludes);$(GeneratedItemPatterns)</DefaultItemExcludes>
+    <TypeScriptToolsVersion>2.9</TypeScriptToolsVersion>
   </PropertyGroup>
 
   <ItemGroup>

src/Web/WebSPA/angular.json

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

src/Web/WebSPA/package.json

@@ -27,44 +27,48 @@
     "lint:ts": "tslint -c tslint.json Client/**/*.ts"
   },
   "dependencies": {
-    "@angular/animations": "^4.2.9",
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
-    "@aspnet/signalr": "1.0.0-preview2-final",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
-    "bootstrap": "4.0.0-alpha.5",
-    "core-js": "^2.4.1",
-    "file-loader": "0.9.0",
-    "font-awesome": "4.6.3",
+    "@angular/animations": "^6.1.4",
+    "@angular/common": "6.1.4",
+    "@angular/compiler": "6.1.4",
+    "@angular/core": "6.1.4",
+    "@angular/forms": "6.1.4",
+    "@angular/http": "6.1.4",
+    "@angular/platform-browser": "6.1.4",
+    "@angular/platform-browser-dynamic": "6.1.4",
+    "@angular/router": "6.1.4",
+    "@aspnet/signalr": "1.0.3",
+    "@ng-bootstrap/ng-bootstrap": "3.1.0",
+    "bootstrap": "4.1.3",
+    "core-js": "^2.5.7",
+    "file-loader": "2.0.0",
+    "font-awesome": "4.7.0",
     "isomorphic-fetch": "2.2.1",
-    "ng2-toastr": "^4.1.2",
-    "normalize.css": "5.0.0",
-    "preboot": "4.5.2",
-    "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4"
+    "jquery": "^3.3.1",
+    "ngx-toastr": "^9.0.2",
+    "normalize.css": "8.0.0",
+    "popper.js": "^1.14.4",
+    "preboot": "6.0.0-beta.5",
+    "rxjs": "^6.2.2",
+    "webpack": "^4.17.1",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "^1.3.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@types/core-js": "0.9.34",
-    "@types/hammerjs": "2.0.33",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "@types/protractor": "1.5.20",
-    "@types/selenium-webdriver": "2.44.26",
-    "codelyzer": "~2.0.0",
-    "sass-lint": "1.10.2",
-    "ts-helpers": "1.1.1",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typedoc": "0.5.0",
-    "typescript": "^2.7.1",
-    "url-loader": "0.5.7"
+    "@angular-devkit/build-angular": "~0.7.0",
+    "@angular/cli": "^6.1.5",
+    "@angular/compiler-cli": "6.1.4",
+    "@types/core-js": "2.5.0",
+    "@types/hammerjs": "2.0.35",
+    "@types/jasmine": "2.8.8",
+    "@types/node": "~10.9.2",
+    "@types/protractor": "4.0.0",
+    "@types/selenium-webdriver": "3.0.10",
+    "codelyzer": "~4.4.4",
+    "sass-lint": "1.12.1",
+    "ts-helpers": "1.1.2",
+    "ts-node": "~7.0.1",
+    "tslint": "~5.11.0",
+    "typedoc": "0.12.0",
+    "typescript": "2.9.2",
+    "url-loader": "1.1.1"
   }
 }

src/Web/WebSPA/tsconfig.json

@@ -15,6 +15,7 @@
     "lib": [
       "es2016",
       "dom"
-    ]
+    ],
+    "module": "es2015"
   }
-}
+}