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 `typescript@4.4.2` and `tslib@2.3.0`.
* The error object in `catch` clauses is now typed as `unknown` which caused a lot of compilation errors. I've resolved it by casting either to `Error` or `any` depending on the use case. Note that I've been using `as` casts, rather than typing the object directly, because TS only allows for `any` or `unknown` to be used in the `catch` clause parameters.
* 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.
* There seems to be a bug in `addSyntheticLeadingComment` that was causing the comments to be duplicated. I've updated one of our tests, because I assume that this won't be a problem for Closure.

Author: crisbeto

aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/circle-ci-api.ts

@@ -22,28 +22,28 @@ export interface BuildInfo {
   username: string;
   build_num: number;
   has_artifacts: boolean;
-  outcome: string; // e.g. 'success'
-  vcs_revision: string; // HEAD SHA
+  outcome: string;       // e.g. 'success'
+  vcs_revision: string;  // HEAD SHA
   // there are other fields but they are not used in this code
 }
 
 /**
  * A Helper that can interact with the CircleCI API.
  */
 export class CircleCiApi {
-
   private tokenParam = `circle-token=${this.circleCiToken}`;
 
   /**
    * Construct a helper that can interact with the CircleCI REST API.
-   * @param githubOrg The Github organisation whose repos we want to access in CircleCI (e.g. angular).
+   * @param githubOrg The Github organisation whose repos we want to access in CircleCI (e.g.
+   *     angular).
    * @param githubRepo The Github repo whose builds we want to access in CircleCI (e.g. angular).
    * @param circleCiToken The CircleCI API access token (secret).
    */
   constructor(
-    private githubOrg: string,
-    private githubRepo: string,
-    private circleCiToken: string,
+      private githubOrg: string,
+      private githubRepo: string,
+      private circleCiToken: string,
   ) {
     assertNotMissingOrEmpty('githubOrg', githubOrg);
     assertNotMissingOrEmpty('githubRepo', githubRepo);
@@ -64,7 +64,7 @@ export class CircleCiApi {
       }
       return response.json();
     } catch (error) {
-        throw new Error(`CircleCI build info request failed (${error.message})`);
+      throw new Error(`CircleCI build info request failed (${(error as Error).message})`);
     }
   }
 
@@ -84,7 +84,7 @@ export class CircleCiApi {
       }
       return artifact.url;
     } catch (error) {
-      throw new Error(`CircleCI artifact URL request failed (${error.message})`);
+      throw new Error(`CircleCI artifact URL request failed (${(error as Error).message})`);
     }
   }
 }

aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/utils.ts

@@ -66,7 +66,7 @@ export const getEnvVar = (name: string, isOptional = false): string => {
     try {
      throw new Error(`ERROR: Missing required environment variable '${name}'!`);
     } catch (error) {
-      console.error(error.stack);
+      console.error((error as Error).stack);
       process.exit(1);
     }
   }

aio/aio-builds-setup/dockerbuild/scripts-js/lib/preview-server/build-retriever.ts

@@ -65,7 +65,7 @@ export class BuildRetriever {
         await promisify(fs.writeFile)(outPath, buffer);
       }
       return outPath;
-    } catch (error) {
+    } catch (error: any) {
       this.logger.warn(error);
       const status = (error.type === 'max-size') ? 413 : 500;
       throw new PreviewServerError(status, `CircleCI artifact download failed (${error.message || error})`);

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/test/preview-server/utils.spec.ts

@@ -37,7 +37,7 @@ describe('preview-server/utils', () => {
           originalUrl: 'some.domain.com/path',
         } as express.Request;
         throwRequestError(505, 'ERROR MESSAGE', request);
-      } catch (error) {
+      } catch (error: any) {
         caught = true;
         expect(error).toBeInstanceOf(PreviewServerError);
         expect(error.status).toEqual(505);

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/content/examples/cli-builder/src/my-builder.ts

@@ -29,7 +29,7 @@ async function copyFileBuilder(
     // #docregion builder
     return {
       success: false,
-      error: err.message,
+      error: (err as Error).message,
     };
   }
 

aio/package.json

@@ -100,7 +100,7 @@
     "@angular/service-worker": "12.1.1",
     "@webcomponents/custom-elements": "1.5.0",
     "rxjs": "^6.6.7",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -177,7 +177,7 @@
     "tree-kill": "^1.1.0",
     "ts-node": "^10.0.0",
     "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/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -294,7 +294,8 @@ async function printSwDebugInfo(): Promise<void> {
       }
       console.log(await res.text());
     } catch (err) {
-      console.log(`Failed to retrieve debug info from '/ngsw/state': ${err.message || err}`);
+      console.log('Failed to retrieve debug info from \'/ngsw/state\': ' +
+        (err as Error).message || err);
     }
   }
 

aio/tools/firebase-test-utils/FirebaseRedirectSource.ts

@@ -49,7 +49,7 @@ export class FirebaseRedirectSource {
 
       return new FirebaseRedirectSource(`^${pattern}$`, restNamedGroups);
     } catch (err) {
-      throw new Error(`Error in FirebaseRedirectSource: "${glob}" - ${err.message}`);
+      throw new Error(`Error in FirebaseRedirectSource: "${glob}" - ${(err as Error).message}`);
     }
   }
 
@@ -72,7 +72,7 @@ export class FirebaseRedirectSource {
       // capture groups.
       return new FirebaseRedirectSource(regex.replace(/(\(\?)P(<[^>]+>)/g, '$1$2'));
     } catch (err) {
-      throw new Error(`Error in FirebaseRedirectSource: "${regex}" - ${err.message}`);
+      throw new Error(`Error in FirebaseRedirectSource: "${regex}" - ${(err as Error).message}`);
     }
   }
 

aio/yarn.lock

@@ -12711,7 +12711,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==
@@ -12850,10 +12850,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

@@ -107,6 +107,12 @@ INTEGRATION_TESTS = {
         # 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_ts44/include-all.ts

@@ -0,0 +1,69 @@
+/**
+ * @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
+ */
+
+
+
+import * as animations from '@angular/animations';
+import * as animationsBrowser from '@angular/animations/browser';
+import * as animationsBrowserTesting from '@angular/animations/browser/testing';
+import * as common from '@angular/common';
+import * as commonHttp from '@angular/common/http';
+import * as commonTesting from '@angular/common/testing';
+import * as commonHttpTesting from '@angular/common/testing';
+import * as compiler from '@angular/compiler';
+import * as compilerTesting from '@angular/compiler/testing';
+import * as core from '@angular/core';
+import * as coreTesting from '@angular/core/testing';
+import * as elements from '@angular/elements';
+import * as forms from '@angular/forms';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformBrowserDynamicTesting from '@angular/platform-browser-dynamic/testing';
+import * as platformBrowserAnimations from '@angular/platform-browser/animations';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerInit from '@angular/platform-server/init';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as routerUpgrade from '@angular/router/upgrade';
+import * as serviceWorker from '@angular/service-worker';
+import * as upgrade from '@angular/upgrade';
+import * as upgradeStatic from '@angular/upgrade/static';
+import * as upgradeTesting from '@angular/upgrade/static/testing';
+
+export default {
+  animations,
+  animationsBrowser,
+  animationsBrowserTesting,
+  common,
+  commonTesting,
+  commonHttp,
+  commonHttpTesting,
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  elements,
+  forms,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformBrowserDynamicTesting,
+  platformBrowserAnimations,
+  platformServer,
+  platformServerInit,
+  platformServerTesting,
+  router,
+  routerTesting,
+  routerUpgrade,
+  serviceWorker,
+  upgrade,
+  upgradeStatic,
+  upgradeTesting,
+};

integration/typings_test_ts44/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 4.4 can type-check an Angular application",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/elements": "file:../../dist/packages-dist/elements",
+    "@angular/forms": "file:../../dist/packages-dist/forms",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "4.4.2",
+    "zone.js": "file:../../dist/zone.js-dist/archive/zone.js.tgz"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}

integration/typings_test_ts44/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "./dist/out-tsc",
+    "rootDir": ".",
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ],
+    "types": [],
+  },
+  "files": [
+    "include-all.ts",
+    "node_modules/@types/jasmine/index.d.ts"
+  ]
+}

package.json

@@ -145,9 +145,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"
   },

packages/animations/browser/test/render/transition_animation_engine_spec.ts

@@ -633,7 +633,7 @@ describe('TransitionAnimationEngine', () => {
       try {
         engine.flush();
       } catch (e) {
-        errorMessage = e.toString();
+        errorMessage = (e as Error).toString();
       }
 
       expect(errorMessage).toMatch(/Unable to animate due to the following errors:/);

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.6",
     "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",