fix: import individual rx operators

* Removes 'rxjs/operators' import in favor of indivial imports,
  adds lint rule to prevent that type of import
* Maintains parity with angular/components#8160

Author: CaerusKaru

package-lock.json

@@ -31,7 +31,7 @@
     "@angular/core": "~4.4.4",
     "@angular/platform-browser": "~4.4.4",
     "core-js": "^2.4.1",
-    "rxjs": "^5.5.0",
+    "rxjs": "^5.5.2",
     "systemjs": "0.19.43",
     "tsickle": "^0.23.5",
     "tslib": "^1.8.0",
@@ -125,4 +125,4 @@
     "typescript": "~2.4.2",
     "uglify-js": "^2.8.14"
   }
-}
+}

package.json

@@ -1,12 +1,13 @@
 import {Directive, ElementRef, Inject, Output} from '@angular/core';
-import {DOCUMENT} from '@angular/platform-browser';
+import {DOCUMENT} from '@angular/common';
 
 import {Observable} from 'rxjs/Observable';
 
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/takeUntil';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/map';
+import {fromEvent} from 'rxjs/observable/fromEvent';
+import {map} from 'rxjs/operators/map';
+import {switchMap} from 'rxjs/operators/switchMap';
+import {takeUntil} from 'rxjs/operators/takeUntil';
+
 
 @Directive({
   selector: '[ngxSplitHandle]',
@@ -20,14 +21,13 @@ export class SplitHandleDirective {
   @Output() drag: Observable<{ x: number, y: number }>;
 
   constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
-    const fromEvent = Observable.fromEvent;
     const getMouseEventPosition = (event: MouseEvent) => ({x: event.movementX, y: event.movementY});
 
-    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').map(getMouseEventPosition);
-    const mousemove$ = fromEvent(_document, 'mousemove').map(getMouseEventPosition);
-    const mouseup$ = fromEvent(_document, 'mouseup').map(getMouseEventPosition);
+    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(getMouseEventPosition));
+    const mousemove$ = fromEvent(_document, 'mousemove').pipe(map(getMouseEventPosition));
+    const mouseup$ = fromEvent(_document, 'mouseup').pipe(map(getMouseEventPosition));
 
-    this.drag = mousedown$.switchMap(_ => mousemove$.takeUntil(mouseup$));
+    this.drag = mousedown$.pipe(switchMap(_ => mousemove$.pipe(takeUntil(mouseup$))));
   }
 
 }

src/demo-app/app/github-issues/splitter/split-handle.directive.ts

@@ -49,7 +49,6 @@ System.config({
   packages: {
     // 3rd-Party barrels.
     'rxjs': { main: 'index' },
-    'rxjs/operators': {main: 'index'},
     // Set the default extension for the root package, because otherwise the demo-app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {

src/demo-app/system-config.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Subscription} from 'rxjs/Subscription';
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 
 import {MediaChange, MediaQuerySubscriber} from '../../media-query/media-change';
 import {BreakPoint} from '../../media-query/breakpoints/break-point';

src/lib/api/core/responsive-activation.ts

@@ -10,7 +10,7 @@ import {ɵgetDOM as getDom} from '@angular/platform-browser';
 import {DOCUMENT} from '@angular/common';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
-import {filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
 
 import {MediaChange} from './media-change';
 

src/lib/media-query/match-media.ts

@@ -15,7 +15,8 @@ import {MediaChange} from './media-change';
 import {mergeAlias} from '../utils/add-alias';
 
 import {Observable} from 'rxjs/Observable';
-import {filter, map} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {map} from 'rxjs/operators/map';
 
 /**
  * MediaMonitor uses the MatchMedia service to observe mediaQuery changes (both activations and

src/lib/media-query/media-monitor.ts

@@ -7,7 +7,8 @@
  */
 import {TestBed, inject, async} from '@angular/core/testing';
 
-import {filter, map} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {map} from 'rxjs/operators/map';
 
 import {BreakPoint} from './breakpoints/break-point';
 import {BREAKPOINTS} from './breakpoints/break-points-token';

src/lib/media-query/observable-media.spec.ts

@@ -10,7 +10,8 @@ import {Injectable} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 import {Observable, Subscribable} from 'rxjs/Observable';
 
-import {map, filter} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
+import {filter} from 'rxjs/operators/filter';
 
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
 
@@ -52,7 +53,7 @@ export abstract class ObservableMedia implements Subscribable<MediaChange> {
  *  @usage
  *
  *  // RxJS
- *  import 'rxjs/add/operator/filter';
+ *  import {filter} from 'rxjs/operators/filter';
  *  import { ObservableMedia } from '@angular/flex-layout';
  *
  *  @Component({ ... })
@@ -69,8 +70,9 @@ export abstract class ObservableMedia implements Subscribable<MediaChange> {
  *      //      media.subscribe(onChange);
  *
  *      media.asObservable()
- *        .filter((change:MediaChange) => true)   // silly noop filter
- *        .subscribe(onChange);
+ *        .pipe(
+   *        filter((change:MediaChange) => true)   // silly noop filter
+   *      ).subscribe(onChange);
  *    }
  *  }
  */

src/lib/media-query/observable-media.ts

@@ -1,13 +1,12 @@
-import {Directive, ElementRef, Inject, Output} from '@angular/core';
-import {DOCUMENT} from '@angular/platform-browser';
-import { isBrowser } from '../util/helper';
+import {Directive, ElementRef, Inject, Output, PLATFORM_ID} from '@angular/core';
+import {DOCUMENT, isPlatformBrowser} from '@angular/common';
 
 import {Observable} from 'rxjs/Observable';
+import {fromEvent} from 'rxjs/observable/fromEvent';
+import {switchMap} from 'rxjs/operators/switchMap';
+import {map} from 'rxjs/operators/map';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/takeUntil';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/map';
 
 @Directive({
   selector: '[ngxSplitHandle]',
@@ -20,17 +19,21 @@ export class SplitHandleDirective {
 
   @Output() drag: Observable<{ x: number, y: number }>;
 
-  constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
+  constructor(
+    ref: ElementRef,
+    @Inject(DOCUMENT) _document: any,
+    @Inject(PLATFORM_ID) private _platformId: Object
+  ) {
     const getMouseEventPosition = (event: MouseEvent) => ({x: event.movementX, y: event.movementY});
 
-   if ( isBrowser() ) {
+   if ( isPlatformBrowser(PLATFORM_ID) ) {
     /* tslint:disable */
-    const mousedown$ = Observable.fromEvent(ref.nativeElement, 'mousedown').map(getMouseEventPosition);
-    const mousemove$ = Observable.fromEvent(_document, 'mousemove').map(getMouseEventPosition);
-    const mouseup$ = Observable.fromEvent(_document, 'mouseup').map(getMouseEventPosition);
+    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(getMouseEventPosition));
+    const mousemove$ = fromEvent(_document, 'mousemove').pipe(map(getMouseEventPosition));
+    const mouseup$ = fromEvent(_document, 'mouseup').pipe(map(getMouseEventPosition));
 
     /* tslint:enable*/
-    this.drag = mousedown$.switchMap(_ => mousemove$.takeUntil(mouseup$));
+    this.drag = mousedown$.pipe(switchMap(_ => mousemove$.pipe(takeUntil(mouseup$))));
    }
 
   }

src/universal-app/app/splitter/split-handle.directive.ts

@@ -52,25 +52,15 @@ export const rollupGlobals = {
   'rxjs/Subscriber': 'Rx',
   'rxjs/Scheduler': 'Rx',
   'rxjs/ReplaySubject': 'Rx',
+
   'rxjs/observable/combineLatest': 'Rx.Observable',
   'rxjs/observable/forkJoin': 'Rx.Observable',
   'rxjs/observable/fromEvent': 'Rx.Observable',
   'rxjs/observable/merge': 'Rx.Observable',
   'rxjs/observable/of': 'Rx.Observable',
   'rxjs/observable/throw': 'Rx.Observable',
   'rxjs/observable/defer': 'Rx.Observable',
-  'rxjs/operators': 'Rx.Observable',
-  'rxjs/operators/index': 'Rx.Observable',
 
-  'rxjs/add/observable/merge': 'Rx.Observable',
-  'rxjs/add/observable/fromEvent': 'Rx.Observable',
-  'rxjs/add/observable/of': 'Rx.Observable',
-  'rxjs/add/observable/interval': 'Rx.Observable',
-  'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
-  'rxjs/add/operator/map': 'Rx.Observable.prototype',
-  'rxjs/add/operator/debounceTime': 'Rx.Observable.prototype',
-  'rxjs/add/operator/distinctUntilChanged': 'Rx.Observable.prototype',
-  'rxjs/add/operator/first': 'Rx.Observable.prototype',
-  'rxjs/add/operator/catch': 'Rx.Observable.prototype',
-  'rxjs/add/operator/switchMap': 'Rx.Observable.prototype'
+  'rxjs/operators/filter': 'Rx.operators',
+  'rxjs/operators/map': 'Rx.operators',
 };

tools/package-tools/rollup-globals.ts

@@ -75,7 +75,7 @@
       ["xdescribe"]
     ],
     // Disallows importing the whole RxJS library. Submodules can be still imported.
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [true, "rxjs", "rxjs/operators"],
     // Avoids inconsistent linebreak styles in source files. Forces developers to use LF linebreaks.
     "linebreak-style": [true, "LF"],