Use RxJS pipeables instead of lettables (#2241)

* upgrade dependencies

* fix rxjs/operators path

* use rxjs pipeables

* drop operators.ts

* drop usages of operators.ts

Author: salemdar

README.md

@@ -100,7 +100,7 @@ $ npm run build.prod.rollup.aot
 Your project will be compiled ahead of time (AOT), and then the resulting bundle will be tree-shaken and minified. During the tree-shaking process Rollup statically analyses your code, and your dependencies, and includes the bare minimum in your bundle.
 
 **Notes**
-- Beware of non-static/side-effectful imports. These cannot be properly optimized. For this reason, even though tree-shaking is taking place the developer still needs to be careful not to include non-static imports that are unnecessary, as those referenced imports will always end up in final bundle. Special attention should be given to RxJs, which makes heavy use of non-static/side-effectful imports: make sure you only add the operators you use, as any added operators will be included in your final production bundle.
+- Beware of non-static/side-effectful imports. These cannot be properly optimized. For this reason, even though tree-shaking is taking place the developer still needs to be careful not to include non-static imports that are unnecessary, as those referenced imports will always end up in final bundle. Special attention should be given to RxJs, which makes heavy use of non-static/side-effectful imports: make sure you only [pipeable operators](https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md).
 - UMD modules result in code that cannot be properly optimized. For best results, prefer ES6 modules whenever possible. This includes third-party dependencies: if one is published in both UMD and ES6 modules, go with the ES6 modules version.
 - During a production build, CommonJs modules will be automatically converted to ES6 modules. This means you can use them and/or require dependencies that use them without any issues.
 
@@ -379,7 +379,6 @@ Forks of this project demonstrate how to extend and integrate with other librari
 │   │   │   ├── i18n.providers.ts
 │   │   │   ├── main-prod.ts
 │   │   │   ├── main.ts
-│   │   │   ├── operators.ts
 │   │   │   └── shared
 │   │   │       ├── config
 │   │   │       │   └── env.config.ts
@@ -439,7 +438,6 @@ Forks of this project demonstrate how to extend and integrate with other librari
 │   │       ├── karma.d.ts
 │   │       ├── merge-stream.d.ts
 │   │       ├── open.d.ts
-│   │       ├── operators.d.ts
 │   │       ├── slash.d.ts
 │   │       ├── systemjs-builder.d.ts
 │   │       └── tildify.d.ts

src/client/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { Config } from './shared/config/env.config';
-import './operators';
 
 /**
  * This class represents the main application component.

src/client/app/operators.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-// import 'rxjs/add/operator/do';  // for debugging
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { catchError } from 'rxjs/operators/catchError';
+// import { tap } from 'rxjs/operators/tap'; // for debugging
 
 /**
  * This class provides the NameList service with methods to read names and add names.
@@ -21,9 +23,10 @@ export class NameListService {
    * @return {string[]} The Observable for the HTTP request.
    */
   get(): Observable<string[]> {
-    return this.http.get('assets/data.json')
-    //              .do(data => console.log('server data:', data))  // debug
-                    .catch(this.handleError);
+    return this.http.get<string[]>('assets/data.json')
+                    .pipe(
+    //                tap((data: string[]) => console.log('server data:', data)), // debug
+                      catchError(this.handleError));
   }
 
   /**
@@ -35,7 +38,7 @@ export class NameListService {
     const errMsg = (error.message) ? error.message :
       error.status ? `${error.status} - ${error.statusText}` : 'Server error';
     console.error(errMsg); // log to console instead
-    return Observable.throw(errMsg);
+    return new ErrorObservable(errMsg);
   }
 }
 

src/client/app/shared/name-list/name-list.service.ts

@@ -512,7 +512,7 @@ export class SeedConfig {
         'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
       '@angular/router/testing':
         'node_modules/@angular/router/bundles/router-testing.umd.js',
-      'rxjs/operators': 'node_modules/rxjs/operators.js',
+      'rxjs/operators/*': 'node_modules/rxjs/operators/*',
 
       'app/': `${this.APP_BASE}app/`,
       // For test config
@@ -560,7 +560,7 @@ export class SeedConfig {
       '@angular/common/http':
         'node_modules/@angular/common/bundles/common-http.umd.js',
       'tslib': 'node_modules/tslib/tslib.js',
-      'rxjs/operators': 'node_modules/rxjs/operators.js',
+      'rxjs/operators/*': 'node_modules/rxjs/*',
       'dist/tmp/node_modules/*': 'dist/tmp/node_modules/*',
       'node_modules/*': 'node_modules/*',
       '*': 'node_modules/*'

tools/config/seed.config.ts

@@ -18,7 +18,7 @@ export = (done: any) => {
     paths: {
       'n:*': 'node_modules/*',
       'rxjs/*': 'node_modules/rxjs/*.js',
-      'rxjs/operators': 'node_modules/rxjs/operators.js'
+      'rxjs/operators/*': 'node_modules/rxjs/*'
     },
     map: {
       'rxjs': 'n:rxjs',

tools/manual_typings/seed/operators.d.ts

@@ -36,7 +36,6 @@
     "tools/manual_typings/seed/karma.d.ts",
     "tools/manual_typings/seed/merge-stream.d.ts",
     "tools/manual_typings/seed/open.d.ts",
-    "tools/manual_typings/seed/operators.d.ts",
     "tools/manual_typings/seed/slash.d.ts",
     "tools/manual_typings/seed/systemjs-builder.d.ts",
     "tools/manual_typings/seed/tildify.d.ts",