feat(core): support TypeScript 4.4

Adds support for TypeScript 4.4. High-level overview of the changes made in this PR:

* Bumps the various packages to `[email protected]` and `[email protected]`.
* The `useUnknownInCatchVariables` compiler option has been disabled so that we don't have to cast error objects explicitly everywhere.
* TS now passes in a third argument to the `__spreadArray` call inside child class constructors. I had to update a couple of places in the runtime and ngcc to be able to pick up the calls correctly.
* TS now generates code like `(0, foo)(arg1, arg2)` for imported function calls. I had to update a few of our tests to account for it. See microsoft/TypeScript#44624.
* Our `ngtsc` test setup calls the private `matchFiles` function from TS. I had to update our usage, because a new parameter was added.
* There was one place where we were setting the readonly `hasTrailingComma` property. I updated the usage to pass in the value when constructing the object instead.
* Some browser types were updated which meant that I had to resolve some trivial type errors.
* The downlevel decorators tranform was running into an issue where the Closure synthetic comments were being emitted twice. I've worked around it by recreating the class declaration node instead of cloning it.

aio/aio-builds-setup/dockerbuild/scripts-js/package.json

@@ -33,7 +33,7 @@
     "shelljs": "^0.8.4",
     "source-map-support": "^0.5.19",
     "tar-stream": "^2.1.3",
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@types/body-parser": "^1.19.0",
@@ -49,6 +49,6 @@
     "supertest": "^4.0.2",
     "tslint": "^6.1.3",
     "tslint-jasmine-noSkipOrFocus": "^1.0.9",
-    "typescript": "~4.3.4"
+    "typescript": "~4.4.2"
   }
 }

aio/aio-builds-setup/dockerbuild/scripts-js/tsconfig.json

@@ -33,6 +33,7 @@
     "noUnusedParameters": true,               /* Report errors on unused parameters. */
     "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
     // "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
+    "useUnknownInCatchVariables": false,         /* Avoid having to cast error objects inside `catch` clauses. */
 
     /* Module Resolution Options */
     // "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */

aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock

@@ -2505,10 +2505,10 @@ tslib@^1.8.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
-tslib@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+tslib@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tslint-jasmine-noSkipOrFocus@^1.0.9:
   version "1.0.9"
@@ -2563,10 +2563,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@~4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
-  integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
+typescript@~4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
+  integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
 
 undefsafe@^2.0.2:
   version "2.0.2"

aio/package.json

@@ -102,7 +102,7 @@
     "@webcomponents/custom-elements": "1.5.0",
     "rxjs": "^6.6.7",
     "safevalues": "^0.1.8",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -181,7 +181,7 @@
     "ts-node": "^10.0.0",
     "tsec": "^0.1.5",
     "tslint": "~6.1.3",
-    "typescript": "~4.3.4",
+    "typescript": "~4.4.2",
     "uglify-js": "^3.13.3",
     "unist-util-filter": "^2.0.3",
     "unist-util-source": "^3.0.0",

aio/yarn.lock

@@ -12773,7 +12773,7 @@ tslib@^1.10.0, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.2.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.2.0, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -12912,10 +12912,10 @@ typescript@~3.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
   integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==
 
-typescript@~4.3.4:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@~4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
+  integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
 
 ua-parser-js@^0.7.28:
   version "0.7.28"

integration/BUILD.bazel

@@ -95,18 +95,18 @@ INTEGRATION_TESTS = {
         # root @npm//typescript package.
         "pinned_npm_packages": ["typescript"],
     },
-    "typings_test_ts42": {
-        # Special case for `typings_test_ts42` test as we want to pin
-        # `typescript` at version 4.2.x for that test and not link to the
-        # root @npm//typescript package.
-        "pinned_npm_packages": ["typescript"],
-    },
     "typings_test_ts43": {
         # Special case for `typings_test_ts43` test as we want to pin
         # `typescript` at version 4.3.x for that test and not link to the
         # root @npm//typescript package.
         "pinned_npm_packages": ["typescript"],
     },
+    "typings_test_ts44": {
+        # Special case for `typings_test_ts44` test as we want to pin
+        # `typescript` at version 4.4.x for that test and not link to the
+        # root @npm//typescript package.
+        "pinned_npm_packages": ["typescript"],
+    },
 }
 
 [

integration/typings_test_ts42/package.json → integration/typings_test_ts44/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-integration",
-  "description": "Assert that users with TypeScript 4.2 can type-check an Angular application",
+  "description": "Assert that users with TypeScript 4.4 can type-check an Angular application",
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {
@@ -19,7 +19,7 @@
     "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
     "@types/jasmine": "file:../../node_modules/@types/jasmine",
     "rxjs": "file:../../node_modules/rxjs",
-    "typescript": "4.2.4",
+    "typescript": "4.4.2",
     "zone.js": "file:../../dist/zone.js-dist/archive/zone.js.tgz"
   },
   "scripts": {

package.json

@@ -147,9 +147,9 @@
     "terser": "^4.4.0",
     "tmp": "0.2.1",
     "tsickle": "0.38.1",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "tslint": "6.1.3",
-    "typescript": "~4.3.4",
+    "typescript": "~4.4.2",
     "xhr2": "0.2.1",
     "yargs": "^17.0.0"
   },
@@ -191,6 +191,7 @@
   "// 4": "Overwrite graceful-fs to a version that does not rely on the 'natives' package. This fixes gulp for >= 10.13, more information: #28213",
   "// 5": "Ensure a single version of webdriver-manager so it is hoisted as the integration tests depend on it being found at ../../node_modules/webdriver-manager",
   "// 6": "Ensure that `@babel/*` packages match the below versions to avoid conflicts with `types/babel__*`",
+  "// 7": "TypeScript has to be resolved to 4.4 temporarily until @microsoft/api-extractor is updated",
   "resolutions": {
     "**/graceful-fs": "4.2.8",
     "**/webdriver-manager": "12.1.8",
@@ -200,6 +201,7 @@
     "@babel/preset-env": "7.10.2",
     "@babel/template": "7.8.6",
     "@babel/traverse": "7.8.6",
-    "@babel/types": "7.8.6"
+    "@babel/types": "7.8.6",
+    "typescript": "4.4.2"
   }
 }

packages/animations/package.json

@@ -8,7 +8,7 @@
     "node": "^12.14.1 || >=14.0.0"
   },
   "dependencies": {
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER"

packages/bazel/package.json

@@ -26,13 +26,13 @@
     "@microsoft/api-extractor": "7.18.7",
     "shelljs": "0.8.4",
     "tsickle": "^0.38.0",
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "0.0.0-PLACEHOLDER",
     "@bazel/typescript": ">=1.0.0",
     "terser": "^4.3.1",
-    "typescript": ">=4.2.3 <4.4",
+    "typescript": ">=4.2.3 <4.5",
     "rollup": ">=1.20.0",
     "rollup-plugin-commonjs": ">=9.0.0",
     "rollup-plugin-node-resolve": ">=4.2.0",

packages/benchpress/package.json

@@ -4,7 +4,6 @@
   "description": "Benchpress - a framework for e2e performance tests",
   "main": "index.js",
   "typings": "./index.d.ts",
-  "strictNullChecks": true,
   "dependencies": {
     "@angular/core": "^12.0.0",
     "reflect-metadata": "^0.1.13"

packages/common/package.json

@@ -9,7 +9,7 @@
   },
   "locales": "locales",
   "dependencies": {
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",

packages/compiler-cli/ngcc/src/host/esm5_host.ts

@@ -573,6 +573,7 @@ export class Esm5ReflectionHost extends Esm2015ReflectionHost {
    *
    * 1. `__spread(arguments)`
    * 2. `__spreadArray([], __read(arguments))`
+   * 3. `__spreadArray([], __read(arguments), false)`
    *
    * The tslib helpers may have been emitted inline as in the above example, or they may be read
    * from a namespace import.
@@ -587,8 +588,8 @@ export class Esm5ReflectionHost extends Esm2015ReflectionHost {
       // `__spread(arguments)`
       return call.args.length === 1 && isArgumentsIdentifier(call.args[0]);
     } else if (call.helper === KnownDeclaration.TsHelperSpreadArray) {
-      // `__spreadArray([], __read(arguments))`
-      if (call.args.length !== 2) {
+      // `__spreadArray([], __read(arguments), false)`
+      if (call.args.length !== 2 && call.args.length !== 3) {
         return false;
       }
 

packages/compiler-cli/ngcc/test/integration/ngcc_spec.ts

@@ -381,7 +381,7 @@ runInEachFileSystem(() => {
 
          const jsContents = fs.readFile(_(`/node_modules/test-package/esm5/src/index.js`));
          // Verify that the ES5 bundle does contain the expected downleveling syntax.
-         expect(jsContents).toContain('__spreadArray([], __read(arguments))');
+         expect(jsContents).toContain('__spreadArray([], __read(arguments), false)');
          expect(jsContents)
              .toContain(
                  'var ɵSubClass_BaseFactory; return function SubClass_Factory(t) { return (ɵSubClass_BaseFactory || (ɵSubClass_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(SubClass)))(t || SubClass); };');
@@ -420,7 +420,7 @@ runInEachFileSystem(() => {
 
          const jsContents = fs.readFile(_(`/node_modules/test-package/esm5/src/index.js`));
          // Verify that the ES5 bundle does contain the expected downleveling syntax.
-         expect(jsContents).toContain('__spreadArray([], __read(arguments))');
+         expect(jsContents).toContain('__spreadArray([], __read(arguments), false)');
          expect(jsContents)
              .toContain(
                  'var ɵSubClass_BaseFactory; return function SubClass_Factory(t) { return (ɵSubClass_BaseFactory || (ɵSubClass_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(SubClass)))(t || SubClass); };');

packages/compiler-cli/package.json

@@ -23,12 +23,12 @@
     "semver": "^7.0.0",
     "source-map": "^0.6.1",
     "sourcemap-codec": "^1.4.8",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "yargs": "^17.0.0"
   },
   "peerDependencies": {
     "@angular/compiler": "0.0.0-PLACEHOLDER",
-    "typescript": ">=4.2.3 <4.4"
+    "typescript": ">=4.2.3 <4.5"
   },
   "repository": {
     "type": "git",

packages/compiler-cli/src/ngtsc/file_system/testing/src/test_helper.ts

@@ -69,7 +69,7 @@ runInEachFileSystem.windows = (callback: (os: string) => void) =>
 export function initMockFileSystem(os: string, cwd?: AbsoluteFsPath): MockFileSystem {
   const fs = createMockFileSystem(os, cwd);
   setFileSystem(fs);
-  monkeyPatchTypeScript(os, fs);
+  monkeyPatchTypeScript(fs);
   return fs;
 }
 
@@ -88,11 +88,7 @@ function createMockFileSystem(os: string, cwd?: AbsoluteFsPath): MockFileSystem
   }
 }
 
-function monkeyPatchTypeScript(os: string, fs: MockFileSystem) {
-  ts.sys.directoryExists = path => {
-    const absPath = fs.resolve(path);
-    return fs.exists(absPath) && fs.stat(absPath).isDirectory();
-  };
+function monkeyPatchTypeScript(fs: MockFileSystem) {
   ts.sys.fileExists = path => {
     const absPath = fs.resolve(path);
     return fs.exists(absPath) && fs.stat(absPath).isFile();
@@ -102,6 +98,7 @@ function monkeyPatchTypeScript(os: string, fs: MockFileSystem) {
   ts.sys.readFile = fs.readFile.bind(fs);
   ts.sys.resolvePath = fs.resolve.bind(fs);
   ts.sys.writeFile = fs.writeFile.bind(fs);
+  ts.sys.directoryExists = directoryExists;
   ts.sys.readDirectory = readDirectory;
 
   function getDirectories(path: string): string[] {
@@ -132,21 +129,26 @@ function monkeyPatchTypeScript(os: string, fs: MockFileSystem) {
     return fs.realpath(fs.resolve(path));
   }
 
+  function directoryExists(path: string) {
+    const absPath = fs.resolve(path);
+    return fs.exists(absPath) && fs.stat(absPath).isDirectory();
+  }
+
   // Rather than completely re-implementing we are using the `ts.matchFiles` function,
   // which is internal to the `ts` namespace.
   const tsMatchFiles: (
       path: string, extensions: ReadonlyArray<string>|undefined,
       excludes: ReadonlyArray<string>|undefined, includes: ReadonlyArray<string>|undefined,
       useCaseSensitiveFileNames: boolean, currentDirectory: string, depth: number|undefined,
-      getFileSystemEntries: (path: string) => FileSystemEntries,
-      realpath: (path: string) => string) => string[] = (ts as any).matchFiles;
+      getFileSystemEntries: (path: string) => FileSystemEntries, realpath: (path: string) => string,
+      directoryExists: (path: string) => boolean) => string[] = (ts as any).matchFiles;
 
   function readDirectory(
       path: string, extensions?: ReadonlyArray<string>, excludes?: ReadonlyArray<string>,
       includes?: ReadonlyArray<string>, depth?: number): string[] {
     return tsMatchFiles(
         path, extensions, excludes, includes, fs.isCaseSensitive(), fs.pwd(), depth,
-        getFileSystemEntries, realPath);
+        getFileSystemEntries, realPath, directoryExists);
   }
 }
 

packages/compiler-cli/src/transformers/downlevel_decorators_transform.ts

@@ -67,8 +67,7 @@ function extractMetadataFromSingleDecorator(
         for (const arg of call.arguments) {
           args.push(arg);
         }
-        const argsArrayLiteral = ts.createArrayLiteral(args);
-        argsArrayLiteral.elements.hasTrailingComma = true;
+        const argsArrayLiteral = ts.createArrayLiteral(ts.createNodeArray(args, true));
         metadataProperties.push(ts.createPropertyAssignment('args', argsArrayLiteral));
       }
       break;
@@ -480,8 +479,6 @@ export function getDownlevelDecoratorsTransform(
      * - creates a propDecorators property
      */
     function transformClassDeclaration(classDecl: ts.ClassDeclaration): ts.ClassDeclaration {
-      classDecl = ts.getMutableClone(classDecl);
-
       const newMembers: ts.ClassElement[] = [];
       const decoratedProperties = new Map<string, ts.Decorator[]>();
       let classParameters: ParameterDecorationInfo[]|null = null;
@@ -556,11 +553,10 @@ export function getDownlevelDecoratorsTransform(
 
       const members = ts.setTextRange(
           ts.createNodeArray(newMembers, classDecl.members.hasTrailingComma), classDecl.members);
-
-      return ts.updateClassDeclaration(
-          classDecl, decoratorsToKeep.size ? Array.from(decoratorsToKeep) : undefined,
-          classDecl.modifiers, classDecl.name, classDecl.typeParameters, classDecl.heritageClauses,
-          members);
+      const newClassDecl = ts.createClassDeclaration(
+          decoratorsToKeep.size ? Array.from(decoratorsToKeep) : undefined, classDecl.modifiers,
+          classDecl.name, classDecl.typeParameters, classDecl.heritageClauses, members);
+      return ts.setTextRange(newClassDecl, classDecl);
     }
 
     /**

packages/compiler-cli/src/typescript_support.ts

@@ -15,7 +15,7 @@ import {compareVersions} from './diagnostics/typescript_version';
  * Note: this check is disabled in g3, search for
  * `angularCompilerOptions.disableTypeScriptVersionCheck` config param value in g3.
  */
-const MIN_TS_VERSION = '4.2.3';
+const MIN_TS_VERSION = '4.3.2';
 
 /**
  * Supremum of supported TypeScript versions
@@ -25,7 +25,7 @@ const MIN_TS_VERSION = '4.2.3';
  * Note: this check is disabled in g3, search for
  * `angularCompilerOptions.disableTypeScriptVersionCheck` config param value in g3.
  */
-const MAX_TS_VERSION = '4.4.0';
+const MAX_TS_VERSION = '4.5.0';
 
 /**
  * The currently used version of TypeScript, which can be adjusted for testing purposes using