chore: update to TypeScript 3.1 (#13384)

With TypeScript 3.1, several native DOM types have been updated. Notably, `document.documentElement` and `document.activeElement` are now nullable. APIs relating to `matchMedia` were also updated.

src/cdk-experimental/dialog/dialog.spec.ts

@@ -804,7 +804,7 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName)
+      expect(document.activeElement!.tagName)
           .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
     }));
 
@@ -817,7 +817,7 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName).not.toBe('INPUT');
+      expect(document.activeElement!.tagName).not.toBe('INPUT');
     }));
 
     it('should re-focus trigger element when dialog closes', fakeAsync(() => {
@@ -834,18 +834,18 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id)
+      expect(document.activeElement!.id)
           .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
       dialogRef.close();
-      expect(document.activeElement.id).not.toBe('dialog-trigger',
+      expect(document.activeElement!.id).not.toBe('dialog-trigger',
           'Expcted the focus not to have changed before the animation finishes.');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement.id).toBe('dialog-trigger',
+      expect(document.activeElement!.id).toBe('dialog-trigger',
           'Expected that the trigger was refocused after the dialog is closed.');
 
       document.body.removeChild(button);
@@ -876,7 +876,7 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id).toBe('input-to-be-focused',
+      expect(document.activeElement!.id).toBe('input-to-be-focused',
           'Expected that the trigger was refocused after the dialog is closed.');
 
       document.body.removeChild(button);
@@ -891,7 +891,7 @@ describe('Dialog', () => {
         viewContainerFixture.detectChanges();
         flushMicrotasks();
 
-        expect(document.activeElement.tagName.toLowerCase())
+        expect(document.activeElement!.tagName.toLowerCase())
             .toBe('cdk-dialog-container', 'Expected dialog container to be focused.');
       }));
 

src/cdk/a11y/focus-trap/focus-trap.spec.ts

@@ -37,7 +37,7 @@ describe('FocusTrap', () => {
       // focus event handler directly.
       const result = focusTrapInstance.focusFirstTabbableElement();
 
-      expect(document.activeElement.nodeName.toLowerCase())
+      expect(document.activeElement!.nodeName.toLowerCase())
           .toBe('input', 'Expected input element to be focused');
       expect(result).toBe(true, 'Expected return value to be true if focus was shifted.');
     });
@@ -51,7 +51,7 @@ describe('FocusTrap', () => {
       // In iOS button elements are never tabbable, so the last element will be the input.
       const lastElement = new Platform(platformId).IOS ? 'input' : 'button';
 
-      expect(document.activeElement.nodeName.toLowerCase())
+      expect(document.activeElement!.nodeName.toLowerCase())
           .toBe(lastElement, `Expected ${lastElement} element to be focused`);
 
       expect(result).toBe(true, 'Expected return value to be true if focus was shifted.');
@@ -122,21 +122,21 @@ describe('FocusTrap', () => {
       // Because we can't mimic a real tab press focus change in a unit test, just call the
       // focus event handler directly.
       focusTrapInstance.focusInitialElement();
-      expect(document.activeElement.id).toBe('middle');
+      expect(document.activeElement!.id).toBe('middle');
     });
 
     it('should be able to prioritize the first focus target', () => {
       // Because we can't mimic a real tab press focus change in a unit test, just call the
       // focus event handler directly.
       focusTrapInstance.focusFirstTabbableElement();
-      expect(document.activeElement.id).toBe('first');
+      expect(document.activeElement!.id).toBe('first');
     });
 
     it('should be able to prioritize the last focus target', () => {
       // Because we can't mimic a real tab press focus change in a unit test, just call the
       // focus event handler directly.
       focusTrapInstance.focusLastTabbableElement();
-      expect(document.activeElement.id).toBe('last');
+      expect(document.activeElement!.id).toBe('last');
     });
   });
 
@@ -166,7 +166,7 @@ describe('FocusTrap', () => {
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
-        expect(document.activeElement.id).toBe('auto-capture-target');
+        expect(document.activeElement!.id).toBe('auto-capture-target');
 
         fixture.destroy();
         expect(document.activeElement).toBe(buttonOutsideTrappedRegion);

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -252,5 +252,6 @@ function isPotentiallyFocusable(element: HTMLElement): boolean {
 
 /** Gets the parent window of a DOM node with regards of being inside of an iframe. */
 function getWindow(node: HTMLElement): Window {
-  return node.ownerDocument.defaultView || window;
+  // ownerDocument is null if `node` itself *is* a document.
+  return node.ownerDocument && node.ownerDocument.defaultView || window;
 }

src/cdk/drag-drop/drag.ts

@@ -568,7 +568,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
         // If a transition is short enough, the browser might not fire the `transitionend` event.
         // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
         // fire if the transition hasn't completed when it was supposed to.
-        const timeout = setTimeout(handler, duration * 1.5);
+        const timeout = setTimeout(handler as Function, duration * 1.5);
         this._preview.addEventListener('transitionend', handler);
       });
     });
@@ -685,7 +685,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       while (currentElement) {
         // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
         if (currentElement.matches ? currentElement.matches(selector) :
-            currentElement.msMatchesSelector(selector)) {
+            (currentElement as any).msMatchesSelector(selector)) {
           return currentElement;
         }
 

src/cdk/layout/breakpoints-observer.spec.ts

@@ -133,25 +133,25 @@ describe('BreakpointObserver', () => {
   }));
 });
 
-export class FakeMediaQueryList implements MediaQueryList {
+export class FakeMediaQueryList {
   /** The callback for change events. */
-  addListenerCallback?: (mql: MediaQueryList) => void;
+  addListenerCallback?: (mql: MediaQueryListEvent) => void;
 
   constructor(public matches, public media) {}
 
   /** Toggles the matches state and "emits" a change event. */
   setMatches(matches: boolean) {
     this.matches = matches;
-    this.addListenerCallback!(this);
+    this.addListenerCallback!(this as any);
   }
 
   /** Registers the callback method for change events. */
-  addListener(callback: (mql: MediaQueryList) => void) {
+  addListener(callback: (mql: MediaQueryListEvent) => void) {
     this.addListenerCallback = callback;
   }
 
-  /** Noop, but required for implementing MediaQueryList. */
-  removeListener() {}
+  // Noop removal method for testing.
+  removeListener() { }
 }
 
 @Injectable()

src/cdk/layout/breakpoints-observer.ts

@@ -98,6 +98,8 @@ export class BreakpointObserver implements OnDestroy {
     }
 
     const mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
+    let queryListener;
+
     // Create callback for match changes and add it is as a listener.
     const queryObservable = fromEventPattern<MediaQueryList>(
       // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
@@ -106,11 +108,12 @@ export class BreakpointObserver implements OnDestroy {
       // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
       // patches it.
       (listener: Function) => {
-        mql.addListener((e: MediaQueryList) => this.zone.run(() => listener(e)));
+        // TODO(jelbourn): change this `any` to `MediaQueryListEvent` once Google has upgraded to
+        // TypeScript 3.1 (the type is unavailable before then).
+        queryListener = (e: any) => this.zone.run(() => listener(e));
+        mql.addListener(queryListener);
       },
-      (listener: Function) => {
-        mql.removeListener((e: MediaQueryList) => this.zone.run(() => listener(e)));
-      })
+      () => mql.removeListener(queryListener))
       .pipe(
         takeUntil(this._destroySubject),
         startWith(mql),

src/cdk/layout/media-matcher.spec.ts

@@ -42,7 +42,7 @@ describe('MediaMatcher', () => {
       }
 
       function getStyleTagByString(str: string): HTMLStyleElement | undefined {
-        return Array.from(document.head.querySelectorAll('style')).find(tag => {
+        return Array.from(document.head!.querySelectorAll('style')).find(tag => {
           const rules = tag.sheet ? Array.from((tag.sheet as CSSStyleSheet).cssRules) : [];
           return !!rules.find(rule => rule.cssText.includes(str));
         });

src/cdk/layout/media-matcher.ts

@@ -55,7 +55,7 @@ function createEmptyStyleRule(query: string) {
     if (!mediaQueryStyleNode) {
       mediaQueryStyleNode = document.createElement('style');
       mediaQueryStyleNode.setAttribute('type', 'text/css');
-      document.head.appendChild(mediaQueryStyleNode);
+      document.head!.appendChild(mediaQueryStyleNode);
     }
 
     if (mediaQueryStyleNode.sheet) {
@@ -70,10 +70,12 @@ function createEmptyStyleRule(query: string) {
 
 /** No-op matchMedia replacement for non-browser platforms. */
 function noopMatchMedia(query: string): MediaQueryList {
+  // Use `as any` here to avoid adding additional necessary properties for
+  // the noop matcher.
   return {
     matches: query === 'all' || query === '',
     media: query,
     addListener: () => {},
     removeListener: () => {}
-  };
+  } as any;
 }

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -929,7 +929,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     if (position.overlayY === 'bottom') {
       // When using `bottom`, we adjust the y position such that it is the distance
       // from the bottom of the viewport rather than the top.
-      const documentHeight = this._document.documentElement.clientHeight;
+      const documentHeight = this._document.documentElement!.clientHeight;
       styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;
     } else {
       styles.top = coerceCssPixelValue(overlayPoint.y);
@@ -966,7 +966,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // When we're setting `right`, we adjust the x position such that it is the distance
     // from the right edge of the viewport rather than the left edge.
     if (horizontalStyleProperty === 'right') {
-      const documentWidth = this._document.documentElement.clientWidth;
+      const documentWidth = this._document.documentElement!.clientWidth;
       styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;
     } else {
       styles.left = coerceCssPixelValue(overlayPoint.x);
@@ -1013,8 +1013,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // being that the client properties don't include the scrollbar, as opposed to `innerWidth`
     // and `innerHeight` that do. This is necessary, because the overlay container uses
     // 100% `width` and `height` which don't include the scrollbar either.
-    const width = this._document.documentElement.clientWidth;
-    const height = this._document.documentElement.clientHeight;
+    const width = this._document.documentElement!.clientWidth;
+    const height = this._document.documentElement!.clientHeight;
     const scrollPosition = this._viewportRuler.getViewportScrollPosition();
 
     return {

src/cdk/overlay/scroll/block-scroll-strategy.spec.ts

@@ -9,13 +9,16 @@ import {Overlay, OverlayContainer, OverlayModule, OverlayRef, OverlayConfig} fro
 describe('BlockScrollStrategy', () => {
   let platform: Platform;
   let viewport: ViewportRuler;
+  let documentElement: HTMLElement;
   let overlayRef: OverlayRef;
   let componentPortal: ComponentPortal<FocacciaMsg>;
   let forceScrollElement: HTMLElement;
 
   beforeEach(async(() => {
+    documentElement = document.documentElement!;
+
     // Ensure a clean state for every test.
-    document.documentElement.classList.remove('cdk-global-scrollblock');
+    documentElement.classList.remove('cdk-global-scrollblock');
 
     TestBed.configureTestingModule({
       imports: [OverlayModule, PortalModule, OverlayTestModule]
@@ -51,7 +54,7 @@ describe('BlockScrollStrategy', () => {
         .toBe(100, 'Expected viewport to be scrollable initially.');
 
     overlayRef.attach(componentPortal);
-    expect(document.documentElement.style.top)
+    expect(documentElement.style.top)
         .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');
 
     window.scroll(0, 300);
@@ -77,7 +80,7 @@ describe('BlockScrollStrategy', () => {
         .toBe(100, 'Expected viewport to be scrollable initially.');
 
     overlayRef.attach(componentPortal);
-    expect(document.documentElement.style.left)
+    expect(documentElement.style.left)
         .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');
 
     window.scroll(300, 0);
@@ -95,17 +98,17 @@ describe('BlockScrollStrategy', () => {
 
 
   it('should toggle the `cdk-global-scrollblock` class', skipIOS(() => {
-    expect(document.documentElement.classList).not.toContain('cdk-global-scrollblock');
+    expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
 
     overlayRef.attach(componentPortal);
-    expect(document.documentElement.classList).toContain('cdk-global-scrollblock');
+    expect(documentElement.classList).toContain('cdk-global-scrollblock');
 
     overlayRef.detach();
-    expect(document.documentElement.classList).not.toContain('cdk-global-scrollblock');
+    expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
   }));
 
   it('should restore any previously-set inline styles', skipIOS(() => {
-    const root = document.documentElement;
+    const root = documentElement;
 
     root.style.top = '13px';
     root.style.left = '37px';
@@ -124,22 +127,22 @@ describe('BlockScrollStrategy', () => {
   it(`should't do anything if the page isn't scrollable`, skipIOS(() => {
     forceScrollElement.style.display = 'none';
     overlayRef.attach(componentPortal);
-    expect(document.documentElement.classList).not.toContain('cdk-global-scrollblock');
+    expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
   }));
 
 
   it('should keep the content width', () => {
     forceScrollElement.style.width = '100px';
 
-    const previousContentWidth = document.documentElement.getBoundingClientRect().width;
+    const previousContentWidth = documentElement.getBoundingClientRect().width;
 
     overlayRef.attach(componentPortal);
 
-    expect(document.documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
+    expect(documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
   });
 
   it('should not clobber user-defined scroll-behavior', skipIOS(() => {
-    const root = document.documentElement;
+    const root = documentElement;
     const body = document.body;
 
     root.style['scrollBehavior'] = body.style['scrollBehavior'] = 'smooth';

src/cdk/overlay/scroll/block-scroll-strategy.ts

@@ -29,7 +29,7 @@ export class BlockScrollStrategy implements ScrollStrategy {
   /** Blocks page-level scroll while the attached overlay is open. */
   enable() {
     if (this._canBeEnabled()) {
-      const root = this._document.documentElement;
+      const root = this._document.documentElement!;
 
       this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
 
@@ -49,8 +49,8 @@ export class BlockScrollStrategy implements ScrollStrategy {
   /** Unblocks page-level scroll while the attached overlay is open. */
   disable() {
     if (this._isEnabled) {
-      const html = this._document.documentElement;
-      const body = this._document.body;
+      const html = this._document.documentElement!;
+      const body = this._document.body!;
       const previousHtmlScrollBehavior = html.style['scrollBehavior'] || '';
       const previousBodyScrollBehavior = body.style['scrollBehavior'] || '';
 
@@ -75,7 +75,7 @@ export class BlockScrollStrategy implements ScrollStrategy {
     // Since the scroll strategies can't be singletons, we have to use a global CSS class
     // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
     // scrolling multiple times.
-    const html = this._document.documentElement;
+    const html = this._document.documentElement!;
 
     if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
       return false;

src/cdk/platform/features/scrolling.ts

@@ -30,7 +30,7 @@ let rtlScrollAxisType: RtlScrollAxisType;
 
 /** Check whether the browser supports scroll behaviors. */
 export function supportsScrollBehavior(): boolean {
-  return !!(typeof document == 'object' && 'scrollBehavior' in document.documentElement.style);
+  return !!(typeof document == 'object'  && 'scrollBehavior' in document.documentElement!.style);
 }
 
 /**

src/cdk/scrolling/viewport-ruler.ts

@@ -101,13 +101,14 @@ export class ViewportRuler implements OnDestroy {
     // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
     // `document.documentElement` works consistently, where the `top` and `left` values will
     // equal negative the scroll position.
-    const documentRect = document.documentElement.getBoundingClientRect();
+    const documentElement = document.documentElement!;
+    const documentRect = documentElement.getBoundingClientRect();
 
     const top = -documentRect.top || document.body.scrollTop || window.scrollY ||
-                 document.documentElement.scrollTop || 0;
+                 documentElement.scrollTop || 0;
 
     const left = -documentRect.left || document.body.scrollLeft || window.scrollX ||
-                  document.documentElement.scrollLeft || 0;
+                  documentElement.scrollLeft || 0;
 
     return {top, left};
   }

src/e2e-app/fullscreen/fullscreen-e2e.ts

@@ -37,8 +37,8 @@ export class FullscreenE2E {
   exitFullscreen() {
     if (document.exitFullscreen) {
       document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
+    } else if ((document as any).webkitExitFullscreen) {
+      (document as any).webkitExitFullscreen();
     } else if ((document as any).mozExitFullScreen) {
       (document as any).mozExitFullScreen();
     } else if ((document as any).msExitFullScreen) {

src/lib/bottom-sheet/bottom-sheet.spec.ts

@@ -506,7 +506,7 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName)
+      expect(document.activeElement!.tagName)
           .toBe('INPUT', 'Expected first tabbable element (input) in the sheet to be focused.');
     }));
 
@@ -519,7 +519,7 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName).not.toBe('INPUT');
+      expect(document.activeElement!.tagName).not.toBe('INPUT');
     }));
 
     it('should re-focus trigger element when bottom sheet closes', fakeAsync(() => {
@@ -534,18 +534,18 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id)
+      expect(document.activeElement!.id)
           .not.toBe('bottom-sheet-trigger', 'Expected the focus to change when sheet was opened.');
 
       bottomSheetRef.dismiss();
-      expect(document.activeElement.id).not.toBe('bottom-sheet-trigger',
+      expect(document.activeElement!.id).not.toBe('bottom-sheet-trigger',
           'Expcted the focus not to have changed before the animation finishes.');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       tick(500);
 
-      expect(document.activeElement.id).toBe('bottom-sheet-trigger',
+      expect(document.activeElement!.id).toBe('bottom-sheet-trigger',
           'Expected that the trigger was refocused after the sheet is closed.');
 
       document.body.removeChild(button);

src/lib/core/ripple/ripple.spec.ts

@@ -311,8 +311,8 @@ describe('MatRipple', () => {
         document.body.scrollLeft = pageScrollLeft;
 
         // Firefox
-        document.documentElement.scrollLeft = pageScrollLeft;
-        document.documentElement.scrollTop = pageScrollTop;
+        document.documentElement!.scrollLeft = pageScrollLeft;
+        document.documentElement!.scrollTop = pageScrollTop;
 
         // Mobile safari
         window.scrollTo(pageScrollLeft, pageScrollTop);
@@ -324,8 +324,8 @@ describe('MatRipple', () => {
         document.body.scrollLeft = 0;
 
         // Firefox
-        document.documentElement.scrollLeft = 0;
-        document.documentElement.scrollTop = 0;
+        document.documentElement!.scrollLeft = 0;
+        document.documentElement!.scrollTop = 0;
 
         // Mobile safari
         window.scrollTo(0, 0);

src/lib/datepicker/calendar-header.spec.ts

@@ -1,16 +1,14 @@
-import {Direction, Directionality} from '@angular/cdk/bidi';
-import {MatDatepickerModule} from './datepicker-module';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatDatepickerIntl} from './datepicker-intl';
-import {DEC, FEB, JAN, MatNativeDateModule} from '@angular/material/core';
+import {Directionality} from '@angular/cdk/bidi';
 import {Component} from '@angular/core';
-import {MatCalendar} from './calendar';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {DEC, FEB, JAN, MatNativeDateModule} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
+import {MatCalendar} from './calendar';
+import {MatDatepickerIntl} from './datepicker-intl';
+import {MatDatepickerModule} from './datepicker-module';
 import {yearsPerPage} from './multi-year-view';
 
 describe('MatCalendarHeader', () => {
-  let dir: { value: Direction };
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -23,7 +21,7 @@ describe('MatCalendarHeader', () => {
       ],
       providers: [
         MatDatepickerIntl,
-        {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
+        {provide: Directionality, useFactory: () => ({value: 'ltr'})},
       ],
     });
 

src/lib/datepicker/calendar.spec.ts

@@ -1,4 +1,4 @@
-import {Direction, Directionality} from '@angular/cdk/bidi';
+import {Directionality} from '@angular/cdk/bidi';
 import {ENTER, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {
   dispatchFakeEvent,
@@ -15,7 +15,6 @@ import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerModule} from './datepicker-module';
 
 describe('MatCalendar', () => {
-  let dir: {value: Direction};
   let zone: MockNgZone;
 
   beforeEach(async(() => {
@@ -34,7 +33,7 @@ describe('MatCalendar', () => {
       providers: [
         MatDatepickerIntl,
         {provide: NgZone, useFactory: () => zone = new MockNgZone()},
-        {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
+        {provide: Directionality, useFactory: () => ({value: 'ltr'})},
       ],
     });
 

src/lib/dialog/dialog.spec.ts

@@ -936,7 +936,7 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName)
+      expect(document.activeElement!.tagName)
           .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
     }));
 
@@ -949,7 +949,7 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.tagName).not.toBe('INPUT');
+      expect(document.activeElement!.tagName).not.toBe('INPUT');
     }));
 
     it('should re-focus trigger element when dialog closes', fakeAsync(() => {
@@ -965,18 +965,18 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id)
+      expect(document.activeElement!.id)
           .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
       dialogRef.close();
-      expect(document.activeElement.id).not.toBe('dialog-trigger',
+      expect(document.activeElement!.id).not.toBe('dialog-trigger',
           'Expcted the focus not to have changed before the animation finishes.');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       tick(500);
 
-      expect(document.activeElement.id).toBe('dialog-trigger',
+      expect(document.activeElement!.id).toBe('dialog-trigger',
           'Expected that the trigger was refocused after the dialog is closed.');
 
       document.body.removeChild(button);
@@ -1006,7 +1006,7 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id).toBe('input-to-be-focused',
+      expect(document.activeElement!.id).toBe('input-to-be-focused',
           'Expected that the trigger was refocused after the dialog is closed.');
 
       document.body.removeChild(button);
@@ -1020,7 +1020,7 @@ describe('MatDialog', () => {
         viewContainerFixture.detectChanges();
         flushMicrotasks();
 
-        expect(document.activeElement.tagName)
+        expect(document.activeElement!.tagName)
             .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
       }));
 
@@ -1040,7 +1040,7 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement.id)
+      expect(document.activeElement!.id)
           .not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
 
       dialogRef.close();
@@ -1048,7 +1048,7 @@ describe('MatDialog', () => {
       viewContainerFixture.detectChanges();
       tick(500);
 
-      expect(document.activeElement.id).not.toBe('dialog-trigger',
+      expect(document.activeElement!.id).not.toBe('dialog-trigger',
           'Expected focus not to have been restored.');
 
       document.body.removeChild(button);
@@ -1323,7 +1323,7 @@ describe('MatDialog with default options', () => {
     dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
     expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy();
 
-    expect(document.activeElement.tagName).not.toBe('INPUT');
+    expect(document.activeElement!.tagName).not.toBe('INPUT');
 
     let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
     expect(overlayPane.style.width).toBe('100px');

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

@@ -465,7 +465,7 @@ export class MatFormField extends _MatFormFieldMixinBase
     }
     // If the element is not present in the DOM, the outline gap will need to be calculated
     // the next time it is checked and in the DOM.
-    if (!document.documentElement.contains(this._elementRef.nativeElement)) {
+    if (!document.documentElement!.contains(this._elementRef.nativeElement)) {
       this._outlineGapCalculationNeeded = true;
       return;
     }

src/lib/select/select.spec.ts

@@ -3338,7 +3338,7 @@ describe('MatSelect', () => {
       // both Chrome and Firefox.
       function setScrollTop(num: number) {
         document.body.scrollTop = num;
-        document.documentElement.scrollTop = num;
+        document.documentElement!.scrollTop = num;
       }
 
       beforeEach(fakeAsync(() => {