Fix npm & docker build warnings #1224

Update Angular 7 to 8 to fix warnings and vulnerabilities

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
+import { HttpResponse } from '@angular/common/http';
 import { Router } from '@angular/router';
 
 import { DataService } from '../shared/services/data.service';
@@ -12,7 +12,7 @@ import { ConfigurationService } from '../shared/services/configuration.service';
 import { StorageService } from '../shared/services/storage.service';
 
 import { Observable, Observer, Subject } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
+import { map, catchError, tap } from 'rxjs/operators';
 
 @Injectable()
 export class BasketService {
@@ -61,15 +61,16 @@ export class BasketService {
 
     setBasket(basket): Observable<boolean> {
         let url = this.purchaseUrl + '/api/v1/basket/';
+
         this.basket = basket;
-        return this.service.post(url, basket).pipe(map((response: any) => {
-            return true;
-        }));
+
+        return this.service.post(url, basket).pipe<boolean>(tap((response: any) => true));
     }
 
     setBasketCheckout(basketCheckout): Observable<boolean> {
         let url = this.basketUrl + '/b/api/v1/basket/checkout';
-        return this.service.postWithId(url, basketCheckout).pipe(map((response: any) => {
+
+        return this.service.postWithId(url, basketCheckout).pipe<boolean>(tap((response: any) => {
             this.basketEvents.orderCreated();
             return true;
         }));
@@ -77,10 +78,12 @@ export class BasketService {
 
     getBasket(): Observable<IBasket> {
         let url = this.basketUrl + '/b/api/v1/basket/' + this.basket.buyerId;
-        return this.service.get(url).pipe(map((response: any) => {
+
+        return this.service.get(url).pipe<IBasket>(tap((response: any) => {
             if (response.status === 204) {
                 return null;
             }
+
             return response;
         }));
     }

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

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
 
 import { DataService } from '../shared/services/data.service';
 import { ICampaign } from '../shared/models/campaign.model';
@@ -8,7 +7,7 @@ import { SecurityService } from '../shared/services/security.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
     
 @Injectable()
 export class CampaignsService {
@@ -32,7 +31,7 @@ export class CampaignsService {
         let url = this.marketingUrl + '/m/api/v1/campaigns/user';
         url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
 
-        return this.service.get(url).pipe(map((response: any) => {
+        return this.service.get(url).pipe<ICampaign>(tap((response: any) => {
             return response;
         }));
     }
@@ -40,7 +39,7 @@ export class CampaignsService {
     getCampaign(id: number): Observable<ICampaignItem> {
         let url = this.marketingUrl + '/m/api/v1/campaigns/' + id;
 
-        return this.service.get(url).pipe(map((response: any) => {
+        return this.service.get(url).pipe<ICampaignItem>(tap((response: any) => {
             return response;
         }));
     }    

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

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
 
 import { DataService } from '../shared/services/data.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
@@ -8,7 +7,7 @@ import { ICatalogBrand } from '../shared/models/catalogBrand.model';
 import { ICatalogType } from '../shared/models/catalogType.model';
 
 import { Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 
 @Injectable()
 export class CatalogService {
@@ -36,29 +35,20 @@ export class CatalogService {
       
         url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize;
 
-        return this.service.get(url)
-            .pipe(
-                map((response: any) => {
-                    return response;
-                })
-            );
+        return this.service.get(url).pipe<ICatalog>(tap((response: any) => {
+            return response;
+        }));
     }
 
     getBrands(): Observable<ICatalogBrand[]> {
-        return this.service.get(this.brandUrl)
-            .pipe(
-                map((response: any) => {
-                    return response;
-                })
-            );
+        return this.service.get(this.brandUrl).pipe<ICatalogBrand[]>(tap((response: any) => {
+            return response;
+        }));
     }
 
     getTypes(): Observable<ICatalogType[]> {
-        return this.service.get(this.typesUrl)
-            .pipe(
-                map((response: any) => {
-                    return response;
-                })
-            );
+        return this.service.get(this.typesUrl).pipe<ICatalogType[]>(tap((response: any) => {
+            return response;
+        }));
     };
 }

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

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
 
 import { DataService } from '../shared/services/data.service';
 import { IOrder } from '../shared/models/order.model';
@@ -10,7 +9,7 @@ import { ConfigurationService } from '../shared/services/configuration.service';
 import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 
 @Injectable()
 export class OrdersService {
@@ -27,7 +26,7 @@ export class OrdersService {
     getOrders(): Observable<IOrder[]> {
         let url = this.ordersUrl + '/o/api/v1/orders';
 
-        return this.service.get(url).pipe(map((response: any) => {
+        return this.service.get(url).pipe<IOrder[]>(tap((response: any) => {
             return response;
         }));
     }
@@ -35,7 +34,7 @@ export class OrdersService {
     getOrder(id: number): Observable<IOrderDetail> {
         let url = this.ordersUrl + '/o/api/v1/orders/' + id;
 
-        return this.service.get(url).pipe(map((response: any) => {
+        return this.service.get(url).pipe<IOrderDetail>(tap((response: any) => {
             return response;
         }));
     }

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

@@ -2,7 +2,7 @@
 import { HttpClient, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
 
 import { Observable, throwError } from 'rxjs';
-import { retry, map, catchError } from 'rxjs/operators';
+import { catchError, tap } from 'rxjs/operators';
 
 import { SecurityService } from './security.service';
 import { Guid } from '../../../guid';
@@ -20,7 +20,7 @@ export class DataService {
         return this.http.get(url, options)
             .pipe(
                 // retry(3), // retry a failed request up to 3 times
-                map((res: Response) => {
+                tap((res: Response) => {
                     return res;
                 }),
                 catchError(this.handleError)
@@ -45,7 +45,7 @@ export class DataService {
 
         return this.http.post(url, data, options)
             .pipe(
-                map((res: Response) => {
+                tap((res: Response) => {
                     return res;
                 }),
                 catchError(this.handleError)
@@ -86,7 +86,7 @@ export class DataService {
        
         return this.http.put(url, data, options)
             .pipe(
-                map((res: Response) => {
+                tap((res: Response) => {
                     return res;
                 }),
                 catchError(this.handleError)
@@ -94,12 +94,12 @@ export class DataService {
     }
 
     private setHeaders(options: any, needId?: boolean){
-        if (needId && this.securityService) {            
+        if (needId && this.securityService) {
             options["headers"] = new HttpHeaders()
                 .append('authorization', 'Bearer ' + this.securityService.GetToken())
                 .append('x-requestid', Guid.newGuid());
         }
-        else if (this.securityService) {            
+        else if (this.securityService) {
             options["headers"] = new HttpHeaders()
                 .append('authorization', 'Bearer ' + this.securityService.GetToken());
         }

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

@@ -1,7 +1,7 @@
-import { Injectable }                   from '@angular/core';
-import { Http, Response, Headers }      from '@angular/http';
+import { Injectable } from '@angular/core';
+
+import { HttpClient, HttpHeaders }      from '@angular/common/http';
 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';
@@ -11,14 +11,14 @@ import { StorageService }               from './storage.service';
 export class SecurityService {
 
     private actionUrl: string;
-    private headers: Headers;
+    private headers: HttpHeaders;
     private storage: StorageService;
     private authenticationSource = new Subject<boolean>();
     authenticationChallenge$ = this.authenticationSource.asObservable();
     private authorityUrl = '';
 
-    constructor(private _http: Http, private _router: Router, private route: ActivatedRoute, private _configurationService: ConfigurationService, private _storageService: StorageService) {
-        this.headers = new Headers();
+    constructor(private _http: HttpClient, private _router: Router, private route: ActivatedRoute, private _configurationService: ConfigurationService, private _storageService: StorageService) {
+        this.headers = new HttpHeaders();
         this.headers.append('Content-Type', 'application/json');
         this.headers.append('Accept', 'application/json');
         this.storage = _storageService;
@@ -50,6 +50,7 @@ export class SecurityService {
     }
 
     public UserData: any;
+
     public SetAuthorizationData(token: any, id_token: any) {
         if (this.storage.retrieve('authorizationData') !== '') {
             this.storage.store('authorizationData', '');
@@ -127,7 +128,6 @@ export class SecurityService {
                 id_token = result.id_token;
 
                 let dataIdToken: any = this.getDataFromToken(id_token);
-                console.log(dataIdToken);
 
                 // validate nonce
                 if (dataIdToken.nonce !== this.storage.retrieve('authNonce')) {
@@ -142,7 +142,6 @@ export class SecurityService {
             }
         }
 
-
         if (authResponseIsValid) {
             this.SetAuthorizationData(token, id_token);
         }
@@ -196,8 +195,10 @@ export class SecurityService {
 
     private getDataFromToken(token: any) {
         let data = {};
+
         if (typeof token !== 'undefined') {
             let encoded = token.split('.')[1];
+            
             data = JSON.parse(this.urlBase64Decode(encoded));
         }
 
@@ -219,25 +220,30 @@ export class SecurityService {
     //}
 
     private getUserData = (): Observable<string[]> => {
-        this.setHeaders();
-        if (this.authorityUrl === '')
+        if (this.authorityUrl === '') {
             this.authorityUrl = this.storage.retrieve('IdentityUrl');
+        }
 
-        return this._http.get(this.authorityUrl + '/connect/userinfo', {
-            headers: this.headers,
-            body: ''
-        }).pipe(map(res => res.json()));
+        const options = this.setHeaders();
+
+        return this._http.get<string[]>(`${this.authorityUrl}/connect/userinfo`, options)
+            .pipe<string[]>((info: any) => info);
     }
 
-    private setHeaders() {
-        this.headers = new Headers();
-        this.headers.append('Content-Type', 'application/json');
-        this.headers.append('Accept', 'application/json');
+    private setHeaders(): any {
+        const httpOptions = {
+            headers: new HttpHeaders()
+        };
 
-        let token = this.GetToken();
+        httpOptions.headers = httpOptions.headers.set('Content-Type', 'application/json');
+        httpOptions.headers = httpOptions.headers.set('Accept', 'application/json');
+
+        const token = this.GetToken();
 
         if (token !== '') {
-            this.headers.append('Authorization', 'Bearer ' + token);
+            httpOptions.headers = httpOptions.headers.set('Authorization', `Bearer ${token}`);
         }
+
+        return httpOptions;
     }
 }

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

@@ -2,7 +2,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { HttpModule, JsonpModule } from '@angular/http';
+import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 // Services
@@ -29,10 +29,10 @@ import { UppercasePipe } from './pipes/uppercase.pipe';
         FormsModule,
         ReactiveFormsModule,
         RouterModule,
-        NgbModule.forRoot(),
+        NgbModule,
         // No need to export as these modules don't expose any components/directive etc'
-        HttpModule,
-        JsonpModule
+        HttpClientModule,
+        HttpClientJsonpModule
     ],
     declarations: [
         Pager,

src/Web/WebSPA/Client/polyfills.ts

@@ -41,8 +41,8 @@
 
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/

src/Web/WebSPA/Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_IMAGE=node:8.11
+ARG NODE_IMAGE=node:8.16
 FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
 WORKDIR /app
 EXPOSE 80
@@ -7,9 +7,8 @@ FROM ${NODE_IMAGE} as node-build
 WORKDIR /web
 COPY Web/WebSPA/package.json .
 COPY Web/WebSPA/package-lock.json .
-RUN npm install
 COPY Web/WebSPA .
-RUN npm run build:prod
+RUN npm i npm@latest -g && npm update && npm install && npm run build:prod
 
 FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
 WORKDIR /src

src/Web/WebSPA/package.json

@@ -27,38 +27,39 @@
     "lint:ts": "tslint -c tslint.json Client/**/*.ts"
   },
   "dependencies": {
-    "@angular/animations": "^7.2.10",
-    "@angular/common": "^7.2.10",
-    "@angular/compiler": "^7.2.10",
-    "@angular/core": "^7.2.10",
-    "@angular/forms": "^7.2.10",
-    "@angular/http": "^7.2.10",
-    "@angular/platform-browser": "^7.2.10",
-    "@angular/platform-browser-dynamic": "^7.2.10",
-    "@angular/platform-server": "^7.2.10",
-    "@angular/router": "^7.2.10",
+    "@angular/animations": "8.2.14",
+    "@angular/common": "8.2.14",
+    "@angular/compiler": "8.2.14",
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14",
+    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/platform-server": "8.2.14",
+    "@angular/router": "8.2.14",
     "@microsoft/signalr": "3.0.1",
-    "@ng-bootstrap/ng-bootstrap": "3.3.0",
-    "bootstrap": "4.3.1",
-    "core-js": "^2.5.0",
+    "@ng-bootstrap/ng-bootstrap": "5.2.1",
+    "bootstrap": "4.4.1",
+    "core-js": "^3.0.0",
     "file-loader": "2.0.0",
     "font-awesome": "4.7.0",
     "isomorphic-fetch": "2.2.1",
     "jquery": "3.4.1",
     "ngx-toastr": "10.1.0",
     "normalize.css": "8.0.0",
-    "popper.js": "^1.14.4",
-    "preboot": "6.0.0-beta.5",
-    "rxjs": "~6.3.3",
-    "rxjs-compat": "~6.3.3",
+    "@popperjs/core": "2.0.0",
+    "rxjs": "~6.4.0",
+    "rxjs-compat": "~6.4.0",
     "webpack-dev-server": "3.1.14",
-    "zone.js": "^0.8.29"
+    "zone.js": "~0.9.1",
+    "acorn-dynamic-import": "4.0.0",
+    "acorn": "^6.0.0",
+    "popper.js": "1.16.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.6",
-    "@angular/cli": "^7.3.6",
-    "@angular/compiler-cli": "^7.2.10",
-    "@angular/language-service": "^7.2.10",
+    "@angular-devkit/build-angular": "0.803.23",
+    "@angular/cli": "8.3.23",
+    "@angular/compiler-cli": "8.2.14",
+    "@angular/language-service": "8.2.14",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "^3.3.12",
@@ -66,8 +67,8 @@
     "@types/protractor": "4.0.0",
     "@types/selenium-webdriver": "3.0.10",
     "codelyzer": "^5.0.0-beta.1",
-    "handlebars": "^4.1.2",
     "eslint": "4.18.2",
+    "handlebars": "^4.7.2",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^4.0.1",
@@ -85,7 +86,7 @@
     "ts-node": "~7.0.1",
     "tslint": "^5.14.0",
     "typedoc": "^0.15.0",
-    "typescript": "^3.2.4",
+    "typescript": "3.4.5",
     "url-loader": "1.1.1",
     "webpack": "^4.29.6"
   }

src/docker-compose.yml

@@ -161,7 +161,7 @@ services:
       context: .
       dockerfile: Web/WebSPA/Dockerfile
       args:
-        NODE_IMAGE: ${NODE_IMAGE:-node:8.11}
+        NODE_IMAGE: ${NODE_IMAGE:-node:10.13}
 #    depends_on:
 #      - webshoppingagg
 #      - webshoppingapigw

src/package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}