build: update to Typescript 3.6 (#17428)

Author: jelbourn

.bazelrc

@@ -38,11 +38,10 @@ test --test_output=errors
 build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
 
 ################################
-# Settings for Ivy             #
+# View Engine / Ivy toggle     #
 ################################
 
-# We want to compile with Ivy and with "ngtsc".
-# To build for ViewEngine, use --define=compile=legacy.
+# Use "legacy" for ViewEngine and "aot" for Ivy
 build --define=compile=aot
 
 #######################

package.json

@@ -13,7 +13,7 @@
     "yarn": ">= 1.17.3"
   },
   "scripts": {
-    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js | ivy-ngcc --properties main",
+    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js | ngcc --properties main",
     "build": "bash ./scripts/build-packages-dist.sh",
     "bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable,unsorted-dict-items,out-of-order-load",
     "bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
@@ -41,33 +41,33 @@
   "requiredAngularVersion": "^9.0.0-0 || ^10.0.0-0",
   "requiredMDCVersion": "^4.0.0-alpha.0",
   "dependencies": {
-    "@angular/animations": "9.0.0-next.10",
-    "@angular/common": "9.0.0-next.10",
-    "@angular/compiler": "9.0.0-next.10",
-    "@angular/core": "9.0.0-next.10",
-    "@angular/elements": "9.0.0-next.10",
-    "@angular/forms": "9.0.0-next.10",
-    "@angular/platform-browser": "9.0.0-next.10",
+    "@angular/animations": "^9.0.0-next.12",
+    "@angular/common": "^9.0.0-next.12",
+    "@angular/compiler": "^9.0.0-next.12",
+    "@angular/core": "^9.0.0-next.12",
+    "@angular/elements": "^9.0.0-next.12",
+    "@angular/forms": "^9.0.0-next.12",
+    "@angular/platform-browser": "^9.0.0-next.12",
     "@types/googlemaps": "^3.37.0",
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
     "material-components-web": "^4.0.0-canary.062ade5c0.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
-    "tsickle": "^0.35.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^9.0.0-next.9",
-    "@angular-devkit/schematics": "^9.0.0-next.9",
-    "@angular/bazel": "9.0.0-next.10",
-    "@angular/compiler-cli": "9.0.0-next.10",
-    "@angular/platform-browser-dynamic": "9.0.0-next.10",
-    "@angular/platform-server": "9.0.0-next.10",
-    "@angular/router": "9.0.0-next.10",
-    "@angular/upgrade": "9.0.0-next.10",
+    "@angular-devkit/core": "^9.0.0-next.12",
+    "@angular-devkit/schematics": "^9.0.0-next.12",
+    "@angular/bazel": "^9.0.0-next.12",
+    "@angular/compiler-cli": "^9.0.0-next.12",
+    "@angular/platform-browser-dynamic": "^9.0.0-next.12",
+    "@angular/platform-server": "^9.0.0-next.12",
+    "@angular/router": "^9.0.0-next.12",
+    "@angular/upgrade": "^9.0.0-next.12",
     "@bazel/bazel": "^0.29.0",
     "@bazel/buildifier": "^0.29.0",
     "@bazel/ibazel": "^0.10.3",
@@ -77,7 +77,7 @@
     "@bazel/protractor": "^0.38.3",
     "@firebase/app-types": "^0.3.2",
     "@octokit/rest": "^16.28.7",
-    "@schematics/angular": "^9.0.0-next.9",
+    "@schematics/angular": "^9.0.0-next.12",
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",
@@ -89,7 +89,7 @@
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
     "@types/mock-fs": "^3.6.30",
-    "@types/node": "^7.0.21",
+    "@types/node": "^12.11.1",
     "@types/parse5": "^5.0.0",
     "@types/run-sequence": "^0.0.29",
     "@types/send": "^0.14.5",
@@ -98,7 +98,7 @@
     "browser-sync": "^2.26.7",
     "chalk": "^2.4.2",
     "clang-format": "^1.2.4",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^5.2.0",
     "conventional-changelog": "^3.0.5",
     "dgeni": "^0.4.11",
     "dgeni-packages": "^0.27.1",
@@ -153,11 +153,11 @@
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.20.0",
     "tsutils": "^3.0.0",
-    "typescript": "3.5.3",
+    "typescript": "^3.6.4",
     "uglify-js": "^2.8.14",
     "vrsource-tslint-rules": "5.1.1"
   },
   "resolutions": {
-    "dgeni-packages/typescript": "3.5.3"
+    "dgeni-packages/typescript": "3.6.4"
   }
 }

scripts/circleci/setup-ivy-ngcc.js

@@ -1,7 +1,7 @@
 /**
  * Script that sets up Ivy ngcc to postprocess installed node modules. The script achieves
  * this by updating the "postinstall" script in the "package.json". This is necessary because
- * Bazel manages its own version of the node modules and needs to run ivy-ngcc on its own when
+ * Bazel manages its own version of the node modules and needs to run ngcc on its own when
  * installing dependencies.
  */
 
@@ -13,7 +13,7 @@ const projectDir = join(__dirname, '../../');
 const packageJsonPath = join(projectDir, 'package.json');
 const packageJson = require(packageJsonPath);
 
-const postInstallCommand = `ivy-ngcc --properties main module`;
+const postInstallCommand = `ngcc --properties main module`;
 
 if (!packageJson['scripts']) {
   packageJson['scripts'] = {};

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

@@ -73,7 +73,7 @@ export function throwDialogContentAlreadyAttachedError() {
   },
 })
 export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
-  private _document: Document;
+  private readonly _document: Document;
 
   /** State of the dialog animation. */
   _state: 'void' | 'enter' | 'exit' = 'enter';
@@ -95,7 +95,7 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
 
   @HostBinding('attr.role') get _role() { return this._config.role; }
 
-  @HostBinding('attr.aria-modal') _ariaModal = true;
+  @HostBinding('attr.aria-modal') _ariaModal: boolean = true;
 
   @HostBinding('attr.tabindex') get _tabindex() { return -1; }
   // tslint:disable:no-host-decorator-in-concrete

src/cdk/clipboard/clipboard.spec.ts

@@ -1,7 +1,8 @@
 import {DOCUMENT} from '@angular/common';
 import {TestBed} from '@angular/core/testing';
+import {Clipboard} from './clipboard';
+import {PendingCopy} from './pending-copy';
 
-import {Clipboard, PendingCopy} from './clipboard';
 
 const COPY_CONTENT = 'copy content';
 

src/cdk/clipboard/clipboard.ts

@@ -8,6 +8,8 @@
 
 import {DOCUMENT} from '@angular/common';
 import {Inject, Injectable} from '@angular/core';
+import {PendingCopy} from './pending-copy';
+
 
 /**
  * A service for copying text to the clipboard.
@@ -18,7 +20,7 @@ import {Inject, Injectable} from '@angular/core';
  */
 @Injectable({providedIn: 'root'})
 export class Clipboard {
-  private _document: Document;
+  private readonly _document: Document;
 
   constructor(@Inject(DOCUMENT) document: any) {
     this._document = document;
@@ -51,72 +53,3 @@ export class Clipboard {
     return new PendingCopy(text, this._document);
   }
 }
-
-/**
- * A pending copy-to-clipboard operation.
- *
- * The implementation of copying text to the clipboard modifies the DOM and
- * forces a relayout. This relayout can take too long if the string is large,
- * causing the execCommand('copy') to happen too long after the user clicked.
- * This results in the browser refusing to copy. This object lets the
- * relayout happen in a separate tick from copying by providing a copy function
- * that can be called later.
- *
- * Destroy must be called when no longer in use, regardless of whether `copy` is
- * called.
- */
-export class PendingCopy {
-  private _textarea: HTMLTextAreaElement|undefined;
-
-  constructor(text: string, private readonly _document: Document) {
-    const textarea = this._textarea = this._document.createElement('textarea');
-    const styles = textarea.style;
-
-    // Hide the element for display and accessibility. Set an
-    // absolute position so the page layout isn't affected.
-    styles.opacity = '0';
-    styles.position = 'absolute';
-    styles.left = styles.top = '-999em';
-    textarea.setAttribute('aria-hidden', 'true');
-    textarea.value = text;
-    this._document.body.appendChild(textarea);
-  }
-
-  /** Finishes copying the text. */
-  copy(): boolean {
-    const textarea = this._textarea;
-    let successful = false;
-
-    try {  // Older browsers could throw if copy is not supported.
-      if (textarea) {
-        const currentFocus = this._document.activeElement;
-
-        textarea.select();
-        textarea.setSelectionRange(0, textarea.value.length);
-        successful = this._document.execCommand('copy');
-
-        if (currentFocus && currentFocus instanceof HTMLElement) {
-          currentFocus.focus();
-        }
-      }
-    } catch {
-      // Discard error.
-      // Initial setting of {@code successful} will represent failure here.
-    }
-
-    return successful;
-  }
-
-  /** Cleans up DOM changes used to perform the copy operation. */
-  destroy() {
-    const textarea = this._textarea;
-
-    if (textarea) {
-      if (textarea.parentNode) {
-        textarea.parentNode.removeChild(textarea);
-      }
-
-      this._textarea = undefined;
-    }
-  }
-}

src/cdk/clipboard/copy-to-clipboard.ts

@@ -26,7 +26,7 @@ import {Clipboard} from './clipboard';
 })
 export class CdkCopyToClipboard {
   /** Content to be copied. */
-  @Input('cdkCopyToClipboard') text = '';
+  @Input('cdkCopyToClipboard') text: string = '';
 
   /**
    * Emits when some text is copied to the clipboard. The

src/cdk/clipboard/pending-copy.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+/**
+ * A pending copy-to-clipboard operation.
+ *
+ * The implementation of copying text to the clipboard modifies the DOM and
+ * forces a relayout. This relayout can take too long if the string is large,
+ * causing the execCommand('copy') to happen too long after the user clicked.
+ * This results in the browser refusing to copy. This object lets the
+ * relayout happen in a separate tick from copying by providing a copy function
+ * that can be called later.
+ *
+ * Destroy must be called when no longer in use, regardless of whether `copy` is
+ * called.
+ */
+export class PendingCopy {
+  private _textarea: HTMLTextAreaElement|undefined;
+
+  constructor(text: string, private readonly _document: Document) {
+    const textarea = this._textarea = this._document.createElement('textarea');
+    const styles = textarea.style;
+
+    // Hide the element for display and accessibility. Set an
+    // absolute position so the page layout isn't affected.
+    styles.opacity = '0';
+    styles.position = 'absolute';
+    styles.left = styles.top = '-999em';
+    textarea.setAttribute('aria-hidden', 'true');
+    textarea.value = text;
+    this._document.body.appendChild(textarea);
+  }
+
+  /** Finishes copying the text. */
+  copy(): boolean {
+    const textarea = this._textarea;
+    let successful = false;
+
+    try {  // Older browsers could throw if copy is not supported.
+      if (textarea) {
+        const currentFocus = this._document.activeElement;
+
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+        successful = this._document.execCommand('copy');
+
+        if (currentFocus && currentFocus instanceof HTMLElement) {
+          currentFocus.focus();
+        }
+      }
+    } catch {
+      // Discard error.
+      // Initial setting of {@code successful} will represent failure here.
+    }
+
+    return successful;
+  }
+
+  /** Cleans up DOM changes used to perform the copy operation. */
+  destroy() {
+    const textarea = this._textarea;
+
+    if (textarea) {
+      if (textarea.parentNode) {
+        textarea.parentNode.removeChild(textarea);
+      }
+
+      this._textarea = undefined;
+    }
+  }
+}

src/cdk/clipboard/public-api.ts

@@ -9,3 +9,4 @@
 export * from './clipboard';
 export * from './clipboard-module';
 export * from './copy-to-clipboard';
+export * from './pending-copy';

src/cdk/drag-drop/directives/drag.ts

@@ -251,7 +251,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
           }),
           // Listen if the state of any of the handles changes.
           switchMap((handles: QueryList<CdkDragHandle>) => {
-            return merge(...handles.map(item => item._stateChanges));
+            return merge(...handles.map(item => item._stateChanges)) as Observable<CdkDragHandle>;
           }),
           takeUntil(this._destroyed)
         ).subscribe(handleInstance => {

src/cdk/overlay/overlay-config.ts

@@ -61,7 +61,11 @@ export class OverlayConfig {
 
   constructor(config?: OverlayConfig) {
     if (config) {
-      const configKeys = Object.keys(config) as Array<keyof OverlayConfig>;
+      // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
+      // loses the array generic type in the `for of`. But we *also* have to use `Array` because
+      // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
+      const configKeys =
+          Object.keys(config) as Iterable<keyof OverlayConfig> & Array<keyof OverlayConfig>;
       for (const key of configKeys) {
         if (config[key] !== undefined) {
           // TypeScript, as of version 3.5, sees the left-hand-side of this expression

src/cdk/table/sticky-styler.ts

@@ -219,7 +219,10 @@ export class StickyStyler {
     };
 
     let zIndex = 0;
-    for (const dir of STICKY_DIRECTIONS) {
+    // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
+    // loses the array generic type in the `for of`. But we *also* have to use `Array` because
+    // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
+    for (const dir of STICKY_DIRECTIONS as Iterable<StickyDirection> & Array<StickyDirection>) {
       if (element.style[dir]) {
         zIndex += zIndexIncrements[dir];
       }

src/material-experimental/mdc-button/button-base.ts

@@ -109,7 +109,7 @@ export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, Ca
     // attributes, add the correct corresponding MDC classes.
     for (const pair of HOST_SELECTOR_MDC_CLASS_PAIR) {
       if (this._hasHostAttributes(pair.selector)) {
-        pair.mdcClasses.forEach(className => {
+        pair.mdcClasses.forEach((className: string) => {
           classList.add(className);
         });
       }