feat(multiple): add support for TypeScript 4.4 (#23646)

Updates to the latest version of Angular and TypeScript, and resolves the various build errors.

Author: crisbeto

integration/ts-compat/BUILD.bazel

@@ -13,7 +13,6 @@ write_file(
 # List of TypeScript packages that we want to run the compatibility test against.
 # The list contains NPM module names that resolve to the desired TypeScript version.
 typescript_version_packages = [
-    "typescript-4.2",
     "typescript",
 ]
 

package.json

@@ -52,33 +52,33 @@
   },
   "version": "13.0.0-next.7",
   "dependencies": {
-    "@angular/animations": "13.0.0-next.2",
-    "@angular/common": "13.0.0-next.2",
-    "@angular/compiler": "13.0.0-next.2",
-    "@angular/core": "13.0.0-next.2",
-    "@angular/forms": "13.0.0-next.2",
-    "@angular/platform-browser": "13.0.0-next.2",
+    "@angular/animations": "13.0.0-next.8",
+    "@angular/common": "13.0.0-next.8",
+    "@angular/compiler": "13.0.0-next.8",
+    "@angular/core": "13.0.0-next.8",
+    "@angular/forms": "13.0.0-next.8",
+    "@angular/platform-browser": "13.0.0-next.8",
     "@types/googlemaps": "^3.43.1",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
     "material-components-web": "13.0.0-canary.860ad06a1.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-optimizer": "0.1300.0-next.1",
-    "@angular-devkit/core": "13.0.0-next.1",
-    "@angular-devkit/schematics": "13.0.0-next.1",
-    "@angular/bazel": "13.0.0-next.2",
-    "@angular/compiler-cli": "13.0.0-next.2",
+    "@angular-devkit/build-optimizer": "0.1300.0-next.6",
+    "@angular-devkit/core": "13.0.0-next.6",
+    "@angular-devkit/schematics": "13.0.0-next.6",
+    "@angular/bazel": "13.0.0-next.8",
+    "@angular/compiler-cli": "13.0.0-next.8",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#5744e8e7ca5b3dfa76ad73b7b0eff271a108a737",
-    "@angular/localize": "13.0.0-next.2",
-    "@angular/platform-browser-dynamic": "13.0.0-next.2",
-    "@angular/platform-server": "13.0.0-next.2",
-    "@angular/router": "13.0.0-next.2",
+    "@angular/localize": "13.0.0-next.8",
+    "@angular/platform-browser-dynamic": "13.0.0-next.8",
+    "@angular/platform-server": "13.0.0-next.8",
+    "@angular/router": "13.0.0-next.8",
     "@axe-core/webdriverjs": "^4.1.0",
     "@babel/core": "^7.13.10",
     "@babel/traverse": "^7.13.0",
@@ -145,7 +145,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
-    "@schematics/angular": "13.0.0-next.1",
+    "@schematics/angular": "13.0.0-next.6",
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^9.0.5",
     "@types/glob": "^7.1.3",
@@ -226,15 +226,14 @@
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",
     "tsutils": "^3.21.0",
-    "typescript": "~4.3.2",
-    "typescript-4.2": "npm:[email protected]",
+    "typescript": "~4.4.2",
     "vrsource-tslint-rules": "6.0.0",
     "yaml": "^1.10.0"
   },
   "resolutions": {
-    "@angular/dev-infra-private/typescript": "~4.3.2",
+    "@angular/dev-infra-private/typescript": "~4.4.2",
     "browser-sync-client": "2.26.13",
-    "dgeni-packages/typescript": "4.3.2",
+    "dgeni-packages/typescript": "4.4.2",
     "**/https-proxy-agent": "5.0.0"
   }
 }

packages.bzl

@@ -3,7 +3,7 @@
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^13.0.0-0 || ^14.0.0-0"
 MDC_PACKAGE_VERSION = "13.0.0-canary.860ad06a1.0"
-TSLIB_PACKAGE_VERSION = "^2.2.0"
+TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.0.0"
 
 # Each placer holder is used to stamp versions during the build process, replacing the key with it's

scripts/caretaking/firebase-functions/package.json

@@ -11,7 +11,7 @@
     "firebase-functions": "^3.11.0"
   },
   "devDependencies": {
-    "typescript": "^4.3.2",
+    "typescript": "^4.4.2",
     "firebase-tools": "^8.6.0"
   },
   "private": true

scripts/caretaking/firebase-functions/yarn.lock

@@ -3794,10 +3794,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
-  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
+typescript@^4.4.2:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
+  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
 
 unique-string@^1.0.0:
   version "1.0.0"

src/cdk/drag-drop/client-rect.ts

@@ -20,8 +20,10 @@ export function getMutableClientRect(element: Element): ClientRect {
     bottom: clientRect.bottom,
     left: clientRect.left,
     width: clientRect.width,
-    height: clientRect.height
-  };
+    height: clientRect.height,
+    x: clientRect.x,
+    y: clientRect.y
+  } as ClientRect;
 }
 
 /**
@@ -41,7 +43,14 @@ export function isInsideClientRect(clientRect: ClientRect, x: number, y: number)
  * @param top Amount to add to the `top` position.
  * @param left Amount to add to the `left` position.
  */
-export function adjustClientRect(clientRect: ClientRect, top: number, left: number) {
+export function adjustClientRect(clientRect: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+  width: number;
+  height: number;
+}, top: number, left: number) {
   clientRect.top += top;
   clientRect.bottom = clientRect.top + clientRect.height;
 

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

@@ -1530,19 +1530,19 @@ describe('CdkDrag', () => {
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
       const handle = fixture.componentInstance.handleElement.nativeElement;
 
-      expect(dragElement.style.webkitTapHighlightColor).toBeFalsy();
+      expect((dragElement.style as any).webkitTapHighlightColor).toBeFalsy();
 
       startDraggingViaMouse(fixture, handle);
 
-      expect(dragElement.style.webkitTapHighlightColor).toBe('transparent');
+      expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent');
 
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();
 
       dispatchMouseEvent(document, 'mouseup', 50, 100);
       fixture.detectChanges();
 
-      expect(dragElement.style.webkitTapHighlightColor).toBeFalsy();
+      expect((dragElement.style as any).webkitTapHighlightColor).toBeFalsy();
     }));
 
     it('should preserve any existing `webkitTapHighlightColor`', fakeAsync(() => {
@@ -1556,19 +1556,19 @@ describe('CdkDrag', () => {
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
       const handle = fixture.componentInstance.handleElement.nativeElement;
 
-      dragElement.style.webkitTapHighlightColor = 'purple';
+      (dragElement.style as any).webkitTapHighlightColor = 'purple';
 
       startDraggingViaMouse(fixture, handle);
 
-      expect(dragElement.style.webkitTapHighlightColor).toBe('transparent');
+      expect((dragElement.style as any).webkitTapHighlightColor).toBe('transparent');
 
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();
 
       dispatchMouseEvent(document, 'mouseup', 50, 100);
       fixture.detectChanges();
 
-      expect(dragElement.style.webkitTapHighlightColor).toBe('purple');
+      expect((dragElement.style as any).webkitTapHighlightColor).toBe('purple');
     }));
 
     it('should throw if drag handle is attached to an ng-container', fakeAsync(() => {

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

@@ -756,7 +756,7 @@ export class DragRef<T = any> {
     this._toggleNativeDragInteractions();
 
     if (this._handles) {
-      this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
+      (this._rootElement.style as any).webkitTapHighlightColor = this._rootElementTapHighlight;
     }
 
     if (!this._hasStartedDragging) {
@@ -884,8 +884,9 @@ export class DragRef<T = any> {
     // otherwise iOS will still add it, even though all the drag interactions on the handle
     // are disabled.
     if (this._handles.length) {
-      this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor || '';
-      rootElement.style.webkitTapHighlightColor = 'transparent';
+      const rootStyles = rootElement.style as any;
+      this._rootElementTapHighlight = rootStyles.webkitTapHighlightColor || '';
+      rootStyles.webkitTapHighlightColor = 'transparent';
     }
 
     this._hasStartedDragging = this._hasMoved = false;

src/cdk/drag-drop/drop-list-ref.ts

@@ -65,6 +65,13 @@ const enum AutoScrollHorizontalDirection {NONE, LEFT, RIGHT}
  */
 export interface DropListRefInternal extends DropListRef {}
 
+type RootNode = DocumentOrShadowRoot & {
+  // As of TS 4.4 the built in DOM typings don't include `elementFromPoint` on `ShadowRoot`,
+  // even though it exists (see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).
+  // This type is a utility to avoid having to add casts everywhere.
+  elementFromPoint(x: number, y: number): Element | null;
+};
+
 /**
  * Reference to a drop list. Used to manipulate or dispose of the container.
  */
@@ -193,7 +200,7 @@ export class DropListRef<T = any> {
   private readonly _stopScrollTimers = new Subject<void>();
 
   /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
-  private _cachedShadowRoot: DocumentOrShadowRoot | null = null;
+  private _cachedShadowRoot: RootNode | null = null;
 
   /** Reference to the document. */
   private _document: Document;
@@ -568,7 +575,8 @@ export class DropListRef<T = any> {
     // Otherwise check if we can start scrolling the viewport.
     if (!verticalScrollDirection && !horizontalScrollDirection) {
       const {width, height} = this._viewportRuler.getViewportSize();
-      const clientRect = {width, height, top: 0, right: width, bottom: height, left: 0};
+      const clientRect =
+        {width, height, top: 0, right: width, bottom: height, left: 0} as ClientRect;
       verticalScrollDirection = getVerticalScrollDirection(clientRect, pointerY);
       horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
       scrollNode = window;
@@ -935,10 +943,10 @@ export class DropListRef<T = any> {
    * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
    * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
    */
-  private _getShadowRoot(): DocumentOrShadowRoot {
+  private _getShadowRoot(): RootNode {
     if (!this._cachedShadowRoot) {
       const shadowRoot = _getShadowRoot(coerceElement(this.element));
-      this._cachedShadowRoot = shadowRoot || this._document;
+      this._cachedShadowRoot = (shadowRoot || this._document) as RootNode;
     }
 
     return this._cachedShadowRoot;

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

@@ -38,6 +38,9 @@ export type FlexibleConnectedPositionStrategyOrigin = ElementRef | Element | Poi
   height?: number;
 };
 
+/** Equivalent of `ClientRect` without some of the properties we don't care about. */
+type Dimensions = Omit<ClientRect, 'x' | 'y' | 'toJSON'>;
+
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
  * implicit position relative some origin element. The relative position is defined in terms of
@@ -71,13 +74,13 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _positionLocked = false;
 
   /** Cached origin dimensions */
-  private _originRect: ClientRect;
+  private _originRect: Dimensions;
 
   /** Cached overlay dimensions */
-  private _overlayRect: ClientRect;
+  private _overlayRect: Dimensions;
 
   /** Cached viewport dimensions */
-  private _viewportRect: ClientRect;
+  private _viewportRect: Dimensions;
 
   /** Amount of space that must be maintained between the overlay and the edge of the viewport. */
   private _viewportMargin = 0;
@@ -467,7 +470,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   /**
    * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
    */
-  private _getOriginPoint(originRect: ClientRect, pos: ConnectedPosition): Point {
+  private _getOriginPoint(originRect: Dimensions, pos: ConnectedPosition): Point {
     let x: number;
     if (pos.originX == 'center') {
       // Note: when centering we should always use the `left`
@@ -496,7 +499,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    */
   private _getOverlayPoint(
       originPoint: Point,
-      overlayRect: ClientRect,
+      overlayRect: Dimensions,
       pos: ConnectedPosition): Point {
 
     // Calculate the (overlayStartX, overlayStartY), the start of the
@@ -525,7 +528,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   }
 
   /** Gets how well an overlay at the given point will fit within the viewport. */
-  private _getOverlayFit(point: Point, rawOverlayRect: ClientRect, viewport: ClientRect,
+  private _getOverlayFit(point: Point, rawOverlayRect: Dimensions, viewport: Dimensions,
     position: ConnectedPosition): OverlayFit {
 
     // Round the overlay rect when comparing against the
@@ -569,7 +572,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * @param point The (x, y) coordinates of the overlat at some position.
    * @param viewport The geometry of the viewport.
    */
-  private _canFitWithFlexibleDimensions(fit: OverlayFit, point: Point, viewport: ClientRect) {
+  private _canFitWithFlexibleDimensions(fit: OverlayFit, point: Point, viewport: Dimensions) {
     if (this._hasFlexibleDimensions) {
       const availableHeight = viewport.bottom - point.y;
       const availableWidth = viewport.right - point.x;
@@ -598,7 +601,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    *     originPoint.
    */
   private _pushOverlayOnScreen(start: Point,
-                               rawOverlayRect: ClientRect,
+                               rawOverlayRect: Dimensions,
                                scrollPosition: ViewportScrollPosition): Point {
     // If the position is locked and we've pushed the overlay already, reuse the previous push
     // amount, rather than pushing it again. If we were to continue pushing, the element would
@@ -1029,7 +1032,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   }
 
   /** Narrows the given viewport rect by the current _viewportMargin. */
-  private _getNarrowedViewportRect(): ClientRect {
+  private _getNarrowedViewportRect(): Dimensions {
     // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,
     // because we want to use the `clientWidth` and `clientHeight` as the base. The difference
     // being that the client properties don't include the scrollbar, as opposed to `innerWidth`
@@ -1111,7 +1114,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   }
 
   /** Returns the ClientRect of the current origin. */
-  private _getOriginRect(): ClientRect {
+  private _getOriginRect(): Dimensions {
     const origin = this._origin;
 
     if (origin instanceof ElementRef) {
@@ -1165,7 +1168,7 @@ interface FallbackPosition {
   originPoint: Point;
   overlayPoint: Point;
   overlayFit: OverlayFit;
-  overlayRect: ClientRect;
+  overlayRect: Dimensions;
 }
 
 /** Position and size of the overlay sizing wrapper for a specific position. */
@@ -1182,7 +1185,7 @@ interface BoundingBoxRect {
 interface FlexibleFit {
   position: ConnectedPosition;
   origin: Point;
-  overlayRect: ClientRect;
+  overlayRect: Dimensions;
   boundingBoxRect: BoundingBoxRect;
 }
 
@@ -1232,7 +1235,7 @@ function getPixelValue(input: number|string|null|undefined): number|null {
  * deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage
  * size, see #21350).
  */
-function getRoundedBoundingClientRect(clientRect: ClientRect): ClientRect {
+function getRoundedBoundingClientRect(clientRect: Dimensions): Dimensions {
   return {
     top: Math.floor(clientRect.top),
     right: Math.floor(clientRect.right),