after running rxjs-tslint and updating some libraries

package.json

@@ -29,32 +29,32 @@
     "not ie_mob <= 10"
   ],
   "dependencies": {
-    "@angular/animations": "5.2.10",
-    "@angular/common": "5.2.10",
-    "@angular/compiler": "5.2.10",
-    "@angular/core": "5.2.10",
-    "@angular/flex-layout": "5.0.0-beta.14",
-    "@angular/forms": "5.2.10",
-    "@angular/http": "5.2.10",
-    "@angular/platform-browser": "5.2.10",
-    "@angular/platform-browser-dynamic": "5.2.10",
-    "@angular/router": "5.2.10",
+    "@angular/animations": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/flex-layout": "6.0.0-beta.15",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.5",
-    "rxjs": "5.5.10",
+    "rxjs": "^6.0.0",
     "rxjs-tslint": "^0.1.3",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cdk": "5.2.4",
+    "@angular/cdk": "6.0.1",
     "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "5.2.10",
-    "@angular/language-service": "5.2.10",
-    "@angular/material": "5.2.4",
-    "@angular/platform-server": "5.2.10",
-    "@angular/service-worker": "^5.2.10",
-    "@ngx-translate/core": "9.1.1",
-    "@ngx-translate/http-loader": "2.0.1",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular/material": "6.0.1",
+    "@angular/platform-server": "6.0.0",
+    "@angular/service-worker": "^6.0.0",
+    "@ngx-translate/core": "10.0.1",
+    "@ngx-translate/http-loader": "3.0.1",
     "@types/html2canvas": "0.0.33",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
@@ -82,6 +82,6 @@
     "ts-helpers": "1.1.2",
     "ts-node": "5.0.1",
     "tslint": "5.9.1",
-    "typescript": "2.6.2"
+    "typescript": "~2.7.2"
   }
 }

src/app/core/search-bar/search-bar.component.html

@@ -1,7 +1,7 @@
-<mat-input-container>
+<mat-form-field>
     <input matInput placeholder="{{ 'findHero' | translate }}!"
            [matAutocomplete]="heroesAutocomplete" [formControl]="heroFormControl">
-</mat-input-container>
+</mat-form-field>
 
 <mat-autocomplete #heroesAutocomplete="matAutocomplete">
     <mat-option *ngFor="let hero of filteredHeroes"

src/app/core/search-bar/search-bar.component.ts

@@ -1,3 +1,5 @@
+
+import {map, startWith} from 'rxjs/operators';
 import {Component, OnInit} from '@angular/core';
 import {LoggerService} from '../shared/logger.service';
 import {Hero} from '../../heroes/shared/hero.model';
@@ -31,9 +33,9 @@ export class SearchBarComponent implements OnInit {
     this.heroService.getHeroes().subscribe((heroes: Array<Hero>) => {
       this.defaultHeroes = heroes.filter(hero => hero['default']);
 
-      this.heroFormControl.valueChanges
-        .startWith(null)
-        .map(value => this.filterHeroes(value))
+      this.heroFormControl.valueChanges.pipe(
+        startWith(null),
+        map(value => this.filterHeroes(value)))
         .subscribe(heroesFiltered => {
           this.filteredHeroes = heroesFiltered;
         });

src/app/heroes/hero-list/hero-list.component.html

@@ -37,17 +37,17 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
     <h2 class="header__title">{{ 'createHero' | translate }}</h2>
     <div>
         <form [formGroup]="newHeroForm" #form="ngForm" (ngSubmit)="createNewHero(newHeroForm.value)">
-            <mat-input-container class="input-container">
+            <mat-form-field class="input-container">
                 <input matInput type="text"
                        placeholder="{{'name' | translate}}"
                        formControlName="name">
-            </mat-input-container>
+            </mat-form-field>
 
-            <mat-input-container class="input-container">
+            <mat-form-field class="input-container">
                 <input matInput type="text"
                        placeholder="{{'realName' | translate}}"
                        formControlName="alterEgo">
-            </mat-input-container>
+            </mat-form-field>
 
             <button mat-raised-button type="submit" [disabled]="!newHeroForm.valid">
                 {{'create' | translate}}

src/app/heroes/shared/hero.service.ts

@@ -1,9 +1,9 @@
+
+import {throwError as observableThrowError, Observable, of} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {AppConfig} from '../../config/app.config';
 import {Hero} from './hero.model';
-import {Observable} from 'rxjs/Observable';
-import {of} from 'rxjs/observable/of';
 import {catchError, tap} from 'rxjs/operators';
 import {MatSnackBar, MatSnackBarConfig} from '@angular/material';
 import {TranslateService} from '@ngx-translate/core';
@@ -102,7 +102,7 @@ export class HeroService {
         );
     } else {
       this.showSnackBar('heroLikeMaximum');
-      return Observable.throw('maximum votes');
+      return observableThrowError('maximum votes');
     }
   }
 

src/app/shared/interceptors/progress.interceptor.ts

@@ -1,5 +1,7 @@
+
+import {tap} from 'rxjs/operators';
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {ProgressBarService} from '../../core/shared/progress-bar.service';
 
 export class ProgressInterceptor implements HttpInterceptor {
@@ -9,11 +11,11 @@ export class ProgressInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     this.progressBarService.increase();
     return next
-      .handle(req)
-      .do(event => {
+      .handle(req).pipe(
+      tap(event => {
         if (event instanceof HttpResponse) {
           this.progressBarService.decrease();
         }
-      });
+      }));
   }
 }

src/app/shared/interceptors/timing.interceptor.ts

@@ -1,5 +1,7 @@
+
+import {tap} from 'rxjs/operators';
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {LoggerService} from '../../core/shared/logger.service';
 
 export class TimingInterceptor implements HttpInterceptor {
@@ -9,12 +11,12 @@ export class TimingInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     const started = Date.now();
     return next
-      .handle(req)
-      .do(event => {
+      .handle(req).pipe(
+      tap(event => {
         if (event instanceof HttpResponse) {
           const elapsed = Date.now() - started;
           LoggerService.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
         }
-      });
+      }));
   }
 }

src/polyfills.ts

@@ -78,13 +78,13 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * CUSTOM IMPORTS
  */
-import 'rxjs/add/observable/throw';
-import 'rxjs/add/observable/forkJoin';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
+
+
+
+
+
+
+
 
 
 /**

tslint.json

@@ -16,7 +16,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,