build: update to typescript 4.5 and angular 13.1 (#24048)

Bumps the versions of TypeScript and Angular to 4.5 and 13.1 respectively, and accounts for some breaking changes.

Author: crisbeto

integration/ts-compat/BUILD.bazel

@@ -13,6 +13,7 @@ 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.4",
     "typescript",
 ]
 

package.json

@@ -51,12 +51,12 @@
   },
   "version": "13.1.0-next.3",
   "dependencies": {
-    "@angular/animations": "13.0.1",
-    "@angular/common": "13.0.1",
-    "@angular/compiler": "13.0.1",
-    "@angular/core": "13.0.1",
-    "@angular/forms": "13.0.1",
-    "@angular/platform-browser": "13.0.1",
+    "@angular/animations": "^13.1.0-next.3",
+    "@angular/common": "^13.1.0-next.3",
+    "@angular/compiler": "^13.1.0-next.3",
+    "@angular/core": "^13.1.0-next.3",
+    "@angular/forms": "^13.1.0-next.3",
+    "@angular/platform-browser": "^13.1.0-next.3",
     "@types/google.maps": "^3.45.6",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
@@ -67,17 +67,17 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.0.2",
-    "@angular-devkit/core": "13.0.2",
-    "@angular-devkit/schematics": "13.0.2",
-    "@angular/bazel": "13.0.1",
-    "@angular/cli": "13.0.2",
-    "@angular/compiler-cli": "13.0.1",
+    "@angular-devkit/build-angular": "^13.1.0-next.3",
+    "@angular-devkit/core": "^13.1.0-next.3",
+    "@angular-devkit/schematics": "^13.1.0-next.3",
+    "@angular/bazel": "^13.1.0-next.3",
+    "@angular/cli": "^13.1.0-next.3",
+    "@angular/compiler-cli": "^13.1.0-next.3",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#c55a3937d45945489714273bfbbe9b803ceff89e",
-    "@angular/localize": "13.0.1",
-    "@angular/platform-browser-dynamic": "13.0.1",
-    "@angular/platform-server": "13.0.1",
-    "@angular/router": "13.0.1",
+    "@angular/localize": "^13.1.0-next.3",
+    "@angular/platform-browser-dynamic": "^13.1.0-next.3",
+    "@angular/platform-server": "^13.1.0-next.3",
+    "@angular/router": "^13.1.0-next.3",
     "@axe-core/webdriverjs": "^4.1.0",
     "@babel/core": "^7.16.0",
     "@bazel/bazelisk": "1.10.1",
@@ -142,7 +142,7 @@
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
-    "@schematics/angular": "13.0.2",
+    "@schematics/angular": "^13.1.0-next.3",
     "@types/babel__core": "^7.1.16",
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^9.0.5",
@@ -214,14 +214,15 @@
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",
     "tsutils": "^3.21.0",
-    "typescript": "~4.4.2",
+    "typescript-4.4": "npm:[email protected]",
+    "typescript": "~4.5.2",
     "vrsource-tslint-rules": "6.0.0",
     "yaml": "^1.10.0"
   },
   "resolutions": {
-    "@angular/dev-infra-private/typescript": "~4.4.2",
+    "@angular/dev-infra-private/typescript": "~4.5.2",
     "browser-sync-client": "2.26.13",
-    "dgeni-packages/typescript": "4.4.2",
+    "dgeni-packages/typescript": "4.5.2",
     "**/https-proxy-agent": "5.0.0"
   }
 }

scripts/caretaking/firebase-functions/package.json

@@ -11,7 +11,7 @@
     "firebase-functions": "^3.11.0"
   },
   "devDependencies": {
-    "typescript": "^4.4.2",
+    "typescript": "^4.5.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.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==
+typescript@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
+  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
 
 unique-string@^1.0.0:
   version "1.0.0"

src/cdk/schematics/utils/build-component.ts

@@ -27,7 +27,7 @@ import {InsertChange} from '@schematics/angular/utility/change';
 import {getWorkspace} from '@schematics/angular/utility/workspace';
 import {buildRelativePath, findModuleFromOptions} from '@schematics/angular/utility/find-module';
 import {parseName} from '@schematics/angular/utility/parse-name';
-import {validateHtmlSelector, validateName} from '@schematics/angular/utility/validation';
+import {validateHtmlSelector} from '@schematics/angular/utility/validation';
 import {ProjectType} from '@schematics/angular/utility/workspace-models';
 import {readFileSync, statSync} from 'fs';
 import {dirname, join, resolve} from 'path';
@@ -200,7 +200,6 @@ export function buildComponent(
     options.path = parsedPath.path;
     options.selector = options.selector || buildSelector(options, project.prefix);
 
-    validateName(options.name);
     validateHtmlSelector(options.selector!);
 
     // In case the specified style extension is not part of the supported CSS supersets,

src/material/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.ts

@@ -39,6 +39,9 @@ interface AnalyzedImport {
 /** Checks whether an analyzed import has the given import flag set. */
 const hasFlag = (data: AnalyzedImport, flag: ImportState) => (data.state & flag) !== 0;
 
+/** Parsed version of TypeScript that can be used for comparisons. */
+const PARSED_TS_VERSION = parseFloat(ts.versionMajorMinor);
+
 /**
  * Import manager that can be used to add or remove TypeScript imports within source
  * files. The manager ensures that multiple transformations are applied properly
@@ -346,7 +349,7 @@ export class ImportManager {
         if (importData.specifiers) {
           const namedBindings = importData.node.importClause!.namedBindings as ts.NamedImports;
           const importSpecifiers = importData.specifiers.map(s =>
-            ts.createImportSpecifier(s.propertyName, s.name),
+            createImportSpecifier(s.propertyName, s.name),
           );
           const updatedBindings = ts.updateNamedImports(namedBindings, importSpecifiers);
 
@@ -355,12 +358,14 @@ export class ImportManager {
           // update the named bindings to not re-print the whole import (which could
           // cause unnecessary formatting changes)
           if (hasFlag(importData, ImportState.ADDED)) {
-            const updatedImport = ts.updateImportDeclaration(
+            // TODO(crisbeto): needs to be cast to any until g3 is updated to TS 4.5.
+            const updatedImport = (ts.updateImportDeclaration as any)(
               importData.node,
               undefined,
               undefined,
               ts.createImportClause(undefined, updatedBindings),
               ts.createStringLiteral(importData.moduleName),
+              undefined,
             );
             const newImportText = this._printer.printNode(
               ts.EmitHint.Unspecified,
@@ -523,3 +528,14 @@ export class ImportManager {
     return commentRanges[commentRanges.length - 1]!.end;
   }
 }
+
+// TODO(crisbeto): backwards-compatibility layer that allows us to support both TS 4.4 and 4.5.
+// Should be removed once we don't have to support 4.4 anymore.
+function createImportSpecifier(
+  propertyName: ts.Identifier | undefined,
+  name: ts.Identifier,
+): ts.ImportSpecifier {
+  return PARSED_TS_VERSION > 4.4
+    ? (ts.createImportSpecifier as any)(false, propertyName, name)
+    : (ts.createImportSpecifier as any)(propertyName, name);
+}