fix: import individual rx operators (#8160)

After the switch to lettable operators, we had started importing all operators via `rxjs/operators`. These changes switch us back to only importing the individual ones and add some linting so it doesn't happen in the future.

CODING_STANDARDS.md

@@ -128,7 +128,7 @@ class ConfigBuilder {
 
 #### RxJS
 When dealing with RxJS operators, import the lettable operator (e.g.
-`import {map} from 'rxjs/operators'`), as opposed to using the "patch" imports which pollute the
+`import {map} from 'rxjs/operators/map'`), as opposed to using the "patch" imports which pollute the
 user's global Observable object (e.g. `import 'rxjs/add/operator/map'`):
 
 ```ts
@@ -137,7 +137,7 @@ import 'rxjs/add/operator/map';
 someObservable.map(...).subscribe(...);
 
 // YES
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 someObservable.pipe(map(...)).subscribe(...);
 ```
 

src/cdk/a11y/focus-trap.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {InteractivityChecker} from './interactivity-checker';
 
 

src/cdk/a11y/list-key-manager.spec.ts

@@ -1,5 +1,5 @@
 import {DOWN_ARROW, TAB, UP_ARROW} from '@angular/cdk/keycodes';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {QueryList} from '@angular/core';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {createKeyboardEvent} from '../testing/event-objects';

src/cdk/a11y/list-key-manager.ts

@@ -10,7 +10,10 @@ import {QueryList} from '@angular/core';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
 import {UP_ARROW, DOWN_ARROW, TAB, A, Z, ZERO, NINE} from '@angular/cdk/keycodes';
-import {debounceTime, filter, map, tap} from 'rxjs/operators';
+import {debounceTime} from 'rxjs/operators/debounceTime';
+import {filter} from 'rxjs/operators/filter';
+import {map} from 'rxjs/operators/map';
+import {tap} from 'rxjs/operators/tap';
 
 /** This interface is for items that can be passed to a ListKeyManager. */
 export interface ListKeyManagerOption {

src/cdk/layout/breakpoints-observer.ts

@@ -9,7 +9,9 @@ import {Injectable, NgZone, OnDestroy} from '@angular/core';
 import {MediaMatcher} from './media-matcher';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {map, startWith, takeUntil} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {coerceArray} from '@angular/cdk/coercion';
 import {combineLatest} from 'rxjs/observable/combineLatest';
 import {fromEventPattern} from 'rxjs/observable/fromEventPattern';

src/cdk/observers/observe-content.ts

@@ -19,7 +19,7 @@ import {
   NgZone,
 } from '@angular/core';
 import {Subject} from 'rxjs/Subject';
-import {debounceTime} from 'rxjs/operators';
+import {debounceTime} from 'rxjs/operators/debounceTime';
 
 /**
  * Factory that creates a new MutationObserver and allows us to stub it out in unit tests.

src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts

@@ -9,7 +9,7 @@
 import {Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
 import {OverlayRef} from '../overlay-ref';
 import {Subscription} from 'rxjs/Subscription';
-import {filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 
 /**

src/cdk/overlay/overlay-ref.ts

@@ -12,7 +12,7 @@ import {OverlayConfig} from './overlay-config';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 
 
 /**

src/cdk/scrolling/scroll-dispatcher.ts

@@ -13,7 +13,8 @@ import {Subscription} from 'rxjs/Subscription';
 import {Observable} from 'rxjs/Observable';
 import {of as observableOf} from 'rxjs/observable/of';
 import {fromEvent} from 'rxjs/observable/fromEvent';
-import {auditTime, filter} from 'rxjs/operators';
+import {auditTime} from 'rxjs/operators/auditTime';
+import {filter} from 'rxjs/operators/filter';
 import {CdkScrollable} from './scrollable';
 
 

src/cdk/scrolling/viewport-ruler.ts

@@ -11,7 +11,7 @@ import {Platform} from '@angular/cdk/platform';
 import {Observable} from 'rxjs/Observable';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 import {merge} from 'rxjs/observable/merge';
-import {auditTime} from 'rxjs/operators';
+import {auditTime} from 'rxjs/operators/auditTime';
 import {Subscription} from 'rxjs/Subscription';
 import {of as observableOf} from 'rxjs/observable/of';
 

src/cdk/table/table.spec.ts

@@ -6,7 +6,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {combineLatest} from 'rxjs/observable/combineLatest';
 import {CdkTableModule} from './index';
 import {Observable} from 'rxjs/Observable';
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 import {
   getTableDuplicateColumnNameError,
   getTableMissingMatchingRowDefError,

src/cdk/table/table.ts

@@ -31,7 +31,7 @@ import {
 } from '@angular/core';
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {CdkCellOutlet, CdkCellOutletRowContext, CdkHeaderRowDef, CdkRowDef} from './row';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Subscription} from 'rxjs/Subscription';
 import {Subject} from 'rxjs/Subject';

src/demo-app/system-config.ts

@@ -82,7 +82,6 @@ System.config({
   packages: {
     // Thirdparty 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/e2e-app/system-config.ts

@@ -82,7 +82,6 @@ System.config({
   packages: {
     // Thirdparty 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/autocomplete/autocomplete-trigger.ts

@@ -17,7 +17,11 @@ import {
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {filter, first, switchMap, tap, delay} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {first} from 'rxjs/operators/first';
+import {switchMap} from 'rxjs/operators/switchMap';
+import {tap} from 'rxjs/operators/tap';
+import {delay} from 'rxjs/operators/delay';
 import {
   ChangeDetectorRef,
   Directive,

src/lib/autocomplete/autocomplete.spec.ts

@@ -1,7 +1,8 @@
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {DOWN_ARROW, ENTER, ESCAPE, SPACE, UP_ARROW, TAB} from '@angular/cdk/keycodes';
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {map, startWith} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
+import {startWith} from 'rxjs/operators/startWith';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   createKeyboardEvent,

src/lib/chips/chip-list.ts

@@ -11,7 +11,7 @@ import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
-import {startWith} from 'rxjs/operators';
+import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,

src/lib/datepicker/calendar.ts

@@ -36,7 +36,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {Subscription} from 'rxjs/Subscription';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MatDatepickerIntl} from './datepicker-intl';

src/lib/datepicker/datepicker.ts

@@ -18,7 +18,7 @@ import {
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,

src/lib/dialog/dialog-ref.ts

@@ -7,7 +7,8 @@
  */
 
 import {OverlayRef, GlobalPositionStrategy} from '@angular/cdk/overlay';
-import {filter, first} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {first} from 'rxjs/operators/first';
 import {DialogPosition} from './dialog-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';

src/lib/dialog/dialog.ts

@@ -15,7 +15,8 @@ import {
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {ComponentPortal, ComponentType, PortalInjector, TemplatePortal} from '@angular/cdk/portal';
-import {startWith, filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {startWith} from 'rxjs/operators/startWith';
 import {Location} from '@angular/common';
 import {
   ComponentRef,

src/lib/expansion/expansion-panel-header.ts

@@ -9,7 +9,7 @@
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
-import {filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,

src/lib/form-field/form-field.ts

@@ -8,7 +8,8 @@
 
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {first, startWith} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
+import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentChecked,
   AfterContentInit,

src/lib/icon/icon-registry.ts

@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {catchError, tap, finalize, map, share} from 'rxjs/operators';
+import {catchError} from 'rxjs/operators/catchError';
+import {tap} from 'rxjs/operators/tap';
+import {finalize} from 'rxjs/operators/finalize';
+import {map} from 'rxjs/operators/map';
+import {share} from 'rxjs/operators/share';
 import {Injectable, Optional, SecurityContext, SkipSelf} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

src/lib/icon/icon.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {
   Attribute,
   ChangeDetectionStrategy,

src/lib/menu/menu-directive.ts

@@ -10,7 +10,9 @@ import {AnimationEvent} from '@angular/animations';
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {Direction} from '@angular/cdk/bidi';
 import {ESCAPE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
-import {startWith, switchMap, first} from 'rxjs/operators';
+import {startWith} from 'rxjs/operators/startWith';
+import {switchMap} from 'rxjs/operators/switchMap';
+import {first} from 'rxjs/operators/first';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,

src/lib/menu/menu-trigger.ts

@@ -20,7 +20,7 @@ import {
   VerticalConnectionPos,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
 import {
   AfterContentInit,
   Directive,

src/lib/select/select.spec.ts

@@ -40,7 +40,7 @@ import {
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 import {Subject} from 'rxjs/Subject';
 import {MatSelectModule} from './index';
 import {MatSelect} from './select';

src/lib/select/select.ts

@@ -18,7 +18,11 @@ import {
   ScrollStrategy,
   ViewportRuler,
 } from '@angular/cdk/overlay';
-import {filter, first, map, startWith, takeUntil} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {first} from 'rxjs/operators/first';
+import {map} from 'rxjs/operators/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {
   AfterContentInit,
   Attribute,

src/lib/sidenav/drawer.ts

@@ -32,7 +32,11 @@ import {
 } from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {merge} from 'rxjs/observable/merge';
-import {filter, first, startWith, takeUntil, map} from 'rxjs/operators';
+import {filter} from 'rxjs/operators/filter';
+import {first} from 'rxjs/operators/first';
+import {startWith} from 'rxjs/operators/startWith';
+import {takeUntil} from 'rxjs/operators/takeUntil';
+import {map} from 'rxjs/operators/map';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 

src/lib/snack-bar/snack-bar-container.ts

@@ -32,7 +32,7 @@ import {
   ComponentPortal,
   CdkPortalOutlet,
 } from '@angular/cdk/portal';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';

src/lib/snack-bar/snack-bar.ts

@@ -16,7 +16,8 @@ import {MAT_SNACK_BAR_DATA, MatSnackBarConfig} from './snack-bar-config';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {MatSnackBarRef} from './snack-bar-ref';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {takeUntil, first} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
+import {first} from 'rxjs/operators/first';
 
 
 /**

src/lib/sort/sort.spec.ts

@@ -6,7 +6,7 @@ import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Observable} from 'rxjs/Observable';
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 import {MatTableModule} from '../table/index';
 import {
   MatSort,

src/lib/table/table-data-source.ts

@@ -11,7 +11,9 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {Subscription} from 'rxjs/Subscription';
-import {combineLatest, map, startWith} from 'rxjs/operators';
+import {combineLatest} from 'rxjs/operators/combineLatest';
+import {map} from 'rxjs/operators/map';
+import {startWith} from 'rxjs/operators/startWith';
 import {empty} from 'rxjs/observable/empty';
 
 /**

src/lib/tabs/tab-header.ts

@@ -8,7 +8,7 @@
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
-import {startWith} from 'rxjs/operators';
+import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentChecked,
   AfterContentInit,

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -8,7 +8,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentInit,

src/lib/tooltip/tooltip.ts

@@ -24,7 +24,7 @@ import {
 } from '@angular/cdk/overlay';
 import {Platform} from '@angular/cdk/platform';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   ChangeDetectionStrategy,

test/karma-test-shim.js

@@ -102,7 +102,6 @@ System.config({
   packages: {
     // Thirdparty 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.

tools/package-tools/rollup-globals.ts

@@ -59,6 +59,7 @@ export const rollupGlobals = {
   'rxjs/Observer': 'Rx',
   'rxjs/Subscriber': 'Rx',
   'rxjs/Scheduler': 'Rx',
+
   'rxjs/observable/combineLatest': 'Rx.Observable',
   'rxjs/observable/forkJoin': 'Rx.Observable',
   'rxjs/observable/fromEvent': 'Rx.Observable',
@@ -68,8 +69,21 @@ export const rollupGlobals = {
   'rxjs/observable/defer': 'Rx.Observable',
   'rxjs/observable/fromEventPattern': 'Rx.Observable',
   'rxjs/observable/empty': 'Rx.Observable',
-  'rxjs/operators': 'Rx.Observable',
-  'rxjs/operators/index': 'Rx.Observable',
+
+  'rxjs/operators/debounceTime': 'Rx.Observable',
+  'rxjs/operators/takeUntil': 'Rx.Observable',
+  'rxjs/operators/first': 'Rx.Observable',
+  'rxjs/operators/filter': 'Rx.Observable',
+  'rxjs/operators/map': 'Rx.Observable',
+  'rxjs/operators/tap': 'Rx.Observable',
+  'rxjs/operators/startWith': 'Rx.Observable',
+  'rxjs/operators/auditTime': 'Rx.Observable',
+  'rxjs/operators/switchMap': 'Rx.Observable',
+  'rxjs/operators/finalize': 'Rx.Observable',
+  'rxjs/operators/catchError': 'Rx.Observable',
+  'rxjs/operators/share': 'Rx.Observable',
+  'rxjs/operators/delay': 'Rx.Observable',
+  'rxjs/operators/combineLatest': 'Rx.Observable',
 
   'rxjs/add/observable/merge': 'Rx.Observable',
   'rxjs/add/observable/fromEvent': 'Rx.Observable',

tslint.json

@@ -78,7 +78,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"],