chore(build): update deps to Angular v5 and RxJs 5.5

Updates rxjs to latest best practices

* 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

Fixes #519, #508, #533. Closes #474.

Author: CaerusKaru

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

@@ -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/system-config.ts

@@ -9,31 +9,43 @@ System.config({
   map: {
     'rxjs': 'node:rxjs',
     'main': 'main.js',
+    'tslib': 'node:tslib/tslib.js',
 
     // Angular specific mappings.
     '@angular/core': 'node:@angular/core/bundles/core.umd.js',
+    '@angular/core/testing': 'node:@angular/core/bundles/core-testing.umd.js',
     '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/common/testing': 'node:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http': 'node:@angular/common/bundles/common-http.umd.js',
+    '@angular/common/http/testing': 'node:@angular/common/bundles/common-http-testing.umd.js',
     '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/compiler/testing': 'node:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/http': 'node:@angular/http/bundles/http.umd.js',
+    '@angular/http/testing': 'node:@angular/http/bundles/http-testing.umd.js',
     '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
-    '@angular/router': 'node:@angular/router/bundles/router.umd.js',
+    '@angular/forms/testing': 'node:@angular/forms/bundles/forms-testing.umd.js',
     '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
     '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
-    '@angular/platform-browser': 'node:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser/animations': 'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',    // tslint:disable-line:max-line-length
-    '@angular/platform-browser-dynamic': 'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  // tslint:disable-line:max-line-length
-
-    '@angular/flex-layout': 'dist/bundles/flex-layout.umd.js',
+    '@angular/platform-browser/animations':
+      'node:@angular/platform-browser/bundles/platform-browser-animations.umd',
+    '@angular/platform-browser':
+      'node:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/testing':
+      'node:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/platform-browser-dynamic/testing':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
 
     '@angular/material': 'node:@angular/material/bundles/material.umd.js',
     '@angular/cdk': 'node:@angular/cdk/bundles/cdk.umd.js',
-
-    // CDK Secondary entry points
     '@angular/cdk/a11y': 'node:@angular/cdk/bundles/cdk-a11y.umd.js',
+    '@angular/cdk/accordion': 'node:@angular/cdk/bundles/cdk-accordion.umd.js',
     '@angular/cdk/bidi': 'node:@angular/cdk/bundles/cdk-bidi.umd.js',
     '@angular/cdk/coercion': 'node:@angular/cdk/bundles/cdk-coercion.umd.js',
     '@angular/cdk/collections': 'node:@angular/cdk/bundles/cdk-collections.umd.js',
     '@angular/cdk/keycodes': 'node:@angular/cdk/bundles/cdk-keycodes.umd.js',
+    '@angular/cdk/layout': 'node:@angular/cdk/bundles/cdk-layout.umd.js',
     '@angular/cdk/observers': 'node:@angular/cdk/bundles/cdk-observers.umd.js',
     '@angular/cdk/overlay': 'node:@angular/cdk/bundles/cdk-overlay.umd.js',
     '@angular/cdk/platform': 'node:@angular/cdk/bundles/cdk-platform.umd.js',
@@ -42,14 +54,13 @@ System.config({
     '@angular/cdk/scrolling': 'node:@angular/cdk/bundles/cdk-scrolling.umd.js',
     '@angular/cdk/stepper': 'node:@angular/cdk/bundles/cdk-stepper.umd.js',
     '@angular/cdk/table': 'node:@angular/cdk/bundles/cdk-table.umd.js',
-    '@angular/cdk/testing': 'node:@angular/cdk/bundles/cdk-testing.umd.js'
 
+    '@angular/flex-layout': 'dist/bundles/flex-layout.umd.js',
 
   },
   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/lib/api/core/base-adapter.spec.ts

@@ -5,9 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ElementRef} from '@angular/core';
+import {ElementRef, Renderer2} from '@angular/core';
 import {BaseFxDirectiveAdapter} from './base-adapter';
 import {expect} from '../../utils/testing/custom-matchers';
+import {MediaMonitor} from '@angular/flex-layout/media-query';
 
 export class MockElementRef extends ElementRef {
   constructor() {
@@ -20,7 +21,7 @@ export class MockElementRef extends ElementRef {
 describe('BaseFxDirectiveAdapter class', () => {
   let component;
   beforeEach(() => {
-    component = new BaseFxDirectiveAdapter(null, null, new MockElementRef(), null);
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2); // tslint:disable-line:max-line-length
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

src/lib/api/core/responsive-activation.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';
@@ -130,10 +130,12 @@ export class ResponsiveActivation {
         };
 
         subscriptions.push(
-          this.mediaMonitor.observe(bp.alias).pipe(map(buildChanges))
-            .subscribe(change => {
-              this._onMonitorEvents(change);
-            })
+          this.mediaMonitor
+              .observe(bp.alias)
+              .pipe(map(buildChanges))
+              .subscribe(change => {
+                this._onMonitorEvents(change);
+              })
         );
       }
     });

src/lib/media-query/match-media.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/media-monitor.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/observable-media.spec.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';
@@ -24,13 +25,14 @@ import {OBSERVABLE_MEDIA_PROVIDER} from './observable-media-provider';
 import {MockMatchMediaProvider} from './mock/mock-match-media';
 
 describe('observable-media', () => {
+
   describe('with default BreakPoints', () => {
     let knownBreakPoints: BreakPoint[] = [];
-    let findMediaQuery = (alias) => {
+    let findMediaQuery: (alias: string) => string = (alias) => {
       const NOT_FOUND = `${alias} not found`;
       return knownBreakPoints.reduce((mediaQuery, bp) => {
         return mediaQuery || ((bp.alias === alias) ? bp.mediaQuery : null);
-      }, null) || NOT_FOUND;
+      }, null) as string || NOT_FOUND;
     };
     beforeEach(() => {
       // Configure testbed to prepare services
@@ -107,74 +109,79 @@ describe('observable-media', () => {
             current = change;
           });
 
-          // Confirm initial match is for 'all'
-          expect(current).toBeDefined();
-          expect(current.matches).toBeTruthy();
-          expect(current.mediaQuery).toEqual('all');
+          async(() => {
+            // Confirm initial match is for 'all'
+            expect(current).toBeDefined();
+            expect(current.matches).toBeTruthy();
+            expect(current.mediaQuery).toEqual('all');
 
-          try {
-            matchMedia.autoRegisterQueries = false;
+            try {
+              matchMedia.autoRegisterQueries = false;
 
-            // Activate mediaQuery associated with 'md' alias
-            matchMedia.activate('md');
-            expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+              // Activate mediaQuery associated with 'md' alias
+              matchMedia.activate('md');
+              expect(current.mediaQuery).toEqual(findMediaQuery('md'));
 
-            // Allow overlapping activations to be announced to observers
-            media$.filterOverlaps = false;
+              // Allow overlapping activations to be announced to observers
+              media$.filterOverlaps = false;
 
-            matchMedia.activate('gt-lg');
-            expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+              matchMedia.activate('gt-lg');
+              expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
 
-            matchMedia.activate('unknown');
-            expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+              matchMedia.activate('unknown');
+              expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
 
-          } finally {
-            matchMedia.autoRegisterQueries = true;
-            subscription.unsubscribe();
-          }
+            } finally {
+              matchMedia.autoRegisterQueries = true;
+              subscription.unsubscribe();
+            }
+          });
         }));
 
-    it('can `.unsubscribe()` properly', async(inject(
+    it('can `.unsubscribe()` properly', inject(
         [ObservableMedia, MatchMedia],
         (media, matchMedia) => {
           let current: MediaChange;
           let subscription = media.subscribe((change: MediaChange) => {
             current = change;
           });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('md');
-          expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+          async(() => {
+            // Activate mediaQuery associated with 'md' alias
+            matchMedia.activate('md');
+            expect(current.mediaQuery).toEqual(findMediaQuery('md'));
 
-          // Un-subscribe
-          subscription.unsubscribe();
+            // Un-subscribe
+            subscription.unsubscribe();
 
-          matchMedia.activate('lg');
-          expect(current.mqAlias).toBe('md');
+            matchMedia.activate('lg');
+            expect(current.mqAlias).toBe('md');
 
-          matchMedia.activate('xs');
-          expect(current.mqAlias).toBe('md');
-        })));
+            matchMedia.activate('xs');
+            expect(current.mqAlias).toBe('md');
+          });
+        }));
 
-    it('can observe a startup activation of XS', async(inject(
+    it('can observe a startup activation of XS', inject(
         [ObservableMedia, MatchMedia],
         (media, matchMedia) => {
           let current: MediaChange;
           let subscription = media.subscribe((change: MediaChange) => {
             current = change;
           });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('xs');
-          expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
-
-          // Un-subscribe
-          subscription.unsubscribe();
+          async(() => {
+            // Activate mediaQuery associated with 'md' alias
+            matchMedia.activate('xs');
+            expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
 
-          matchMedia.activate('lg');
-          expect(current.mqAlias).toBe('xs');
+            // Un-subscribe
+            subscription.unsubscribe();
 
-        })));
+            matchMedia.activate('lg');
+            expect(current.mqAlias).toBe('xs');
+          });
+        }));
   });
 
   describe('with custom BreakPoints', () => {
@@ -198,26 +205,26 @@ describe('observable-media', () => {
       });
     });
 
-    it('can activate custom alias with custom mediaQueries', async(inject(
+    it('can activate custom alias with custom mediaQueries', inject(
         [ObservableMedia, MatchMedia],
         (media, matchMedia) => {
           let current: MediaChange;
           let subscription = media.subscribe((change: MediaChange) => {
             current = change;
           });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('print.md');
-          expect(current.mediaQuery).toEqual(mdMediaQuery);
-
-          matchMedia.activate('tablet-gt-xs');
-          expect(current.mqAlias).toBe('tablet-gt-xs');
-          expect(current.mediaQuery).toBe(gtXsMediaQuery);
+          async(() => {
+            // Activate mediaQuery associated with 'md' alias
+            matchMedia.activate('print.md');
+            expect(current.mediaQuery).toEqual(mdMediaQuery);
 
-          subscription.unsubscribe();
-        })));
+            matchMedia.activate('tablet-gt-xs');
+            expect(current.mqAlias).toBe('tablet-gt-xs');
+            expect(current.mediaQuery).toBe(gtXsMediaQuery);
 
+            subscription.unsubscribe();
+          });
+        }));
   });
-
 });
 

src/lib/media-query/observable-media.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);
  *    }
  *  }
  */