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

Author: IvanFarkas

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

@@ -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/globals.scss

@@ -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.component.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/app.module.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-status/basket-status.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.component.ts

@@ -1,24 +1,18 @@
 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';
 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/basket/basket.service.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.component.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/campaigns/campaigns.service.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 = {