chore: update deps to Angular v5

* 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

@@ -26,35 +26,35 @@
     "node": ">= 5.4.1 <= 8"
   },
   "dependencies": {
-    "@angular/common": "~4.4.4",
-    "@angular/compiler": "~4.4.4",
-    "@angular/core": "~4.4.4",
-    "@angular/platform-browser": "~4.4.4",
+    "@angular/common": "^5.1.0",
+    "@angular/compiler": "^5.1.0",
+    "@angular/core": "^5.1.0",
+    "@angular/platform-browser": "^5.1.0",
     "core-js": "^2.4.1",
-    "rxjs": "^5.5.0",
+    "rxjs": "^5.5.5",
     "systemjs": "0.19.43",
-    "tsickle": "^0.23.5",
+    "tsickle": "^0.24.1",
     "tslib": "^1.8.0",
     "zone.js": "^0.8.18"
   },
   "devDependencies": {
-    "@angular/animations": "~4.4.4",
-    "@angular/cdk": "^2.0.0-beta.12",
-    "@angular/compiler-cli": "~4.4.4",
-    "@angular/forms": "~4.4.4",
-    "@angular/http": "~4.4.4",
-    "@angular/material": "^2.0.0-beta.12",
-    "@angular/platform-browser-dynamic": "~4.4.4",
-    "@angular/platform-server": "~4.4.4",
-    "@angular/router": "~4.4.4",
+    "@angular/animations": "^5.1.0",
+    "@angular/cdk": "^5.0.0",
+    "@angular/compiler-cli": "^5.1.0",
+    "@angular/forms": "^5.1.0",
+    "@angular/http": "^5.1.0",
+    "@angular/material": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.1.0",
+    "@angular/platform-server": "^5.1.0",
+    "@angular/router": "^5.1.0",
     "@angular/tsc-wrapped": "~4.4.4",
     "@google-cloud/storage": "^1.4.0",
     "@types/chalk": "^0.4.31",
-    "@types/fs-extra": "^3.0.1",
+    "@types/fs-extra": "^4.0.5",
     "@types/glob": "^5.0.33",
     "@types/gulp": "3.8.32",
     "@types/hammerjs": "^2.0.34",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "^2.6.3",
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
     "@types/node": "^7.0.46",
@@ -65,7 +65,7 @@
     "chalk": "^1.1.3",
     "cli-color": "^1.2.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.19.1",
+    "dgeni-packages": "^0.22.0",
     "firebase": "^4.6.0",
     "firebase-admin": "^5.4.2",
     "firebase-tools": "^3.13.1",
@@ -98,11 +98,11 @@
     "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.0.1",
-    "karma-jasmine": "^1.1.0",
+    "karma-jasmine": "^1.1.1",
     "karma-sauce-launcher": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "madge": "^1.6.0",
-    "magic-string": "^0.21.3",
+    "madge": "^2.2.0",
+    "magic-string": "^0.22.4",
     "merge2": "^1.2.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
@@ -121,8 +121,8 @@
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.8.0",
-    "tsutils": "^2.12.1",
-    "typescript": "~2.4.2",
-    "uglify-js": "^2.8.14"
+    "tsutils": "^2.13.0",
+    "typescript": "^2.4.2",
+    "uglify-js": "^2.8.29"
   }
-}
+}

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

@@ -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/demo-app/system-config.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/base-adapter.spec.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