fix: Fix TS5 + ESM hang; and upgrade dev dependencies to ng17 (#2197)

* fix(ts5): Update build dependencies and types for TS 5

This update appears to fix #2138. It builds with TS 5, and all tests and example tests pass.

fixes: [Bug]: ESM with TypeScript >= 5.0 hangs forever #2138

* chore(deps): Add Husky dev dependency

Husky is required by the postinstall script, but was previously missing.

* chore(upgrade ng): Upgrade to ng17 latest

Tests pass, and example tests pass.

resolves: [Feature]: Angular 17 support  #2196

* chore(dedupe): yarn dedupe

* fix(eslint): Disable eslint warnings due to use of "any"

* chore(deps): Change dev dependency for TS to match @angular/compiler restrictions

package.json

@@ -63,14 +63,14 @@
     "typescript": ">=4.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.4",
-    "@angular/animations": "^16.0.4",
-    "@angular/common": "^16.0.4",
-    "@angular/compiler": "^16.0.4",
-    "@angular/compiler-cli": "~16.0.4",
-    "@angular/core": "^16.0.4",
-    "@angular/platform-browser": "^16.0.4",
-    "@angular/platform-browser-dynamic": "^16.0.4",
+    "@angular-devkit/build-angular": "^17.0.8",
+    "@angular/animations": "^17.0.8",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/compiler-cli": "~17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-angular": "^17.6.7",
     "@jest/transform": "^29.5.0",
@@ -94,6 +94,7 @@
     "fs-extra": "^11.1.1",
     "github-files-fetcher": "^1.6.0",
     "glob": "^10.3.1",
+    "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jest-snapshot-serializer-raw": "^1.2.0",
     "pinst": "^3.0.0",
@@ -102,8 +103,8 @@
     "rxjs": "^7.8.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.2",
-    "typescript": "^4.9.5",
-    "zone.js": "^0.13.0"
+    "typescript": "^5.2.0 <5.3.0",
+    "zone.js": "^0.14.2"
   },
   "packageManager": "[email protected]"
 }

src/ngtsc/ts_compatibility/src/ts_cross_version_utils.ts

@@ -264,7 +264,8 @@ export const updateConstructorDeclaration: Ts48UpdateConstructorDeclarationFn =
  * We should remove it once we have dropped support for the older versions.
  */
 export const getDecorators: (node: ts.Node) => readonly ts.Decorator[] | undefined =
-    IS_AFTER_TS_48 ? (ts as any).getDecorators : node => node.decorators;
+    IS_AFTER_TS_48 ? (ts.getDecorators as (node: ts.Node) => readonly ts.Decorator[] | undefined)
+        : node => (node as any).decorators;
 
 /**
  * Gets the modifiers that have been set on a node.
@@ -273,7 +274,8 @@ export const getDecorators: (node: ts.Node) => readonly ts.Decorator[] | undefin
  * We should remove it once we have dropped support for the older versions.
  */
 export const getModifiers: (node: ts.Node) => readonly ts.Modifier[] | undefined =
-    IS_AFTER_TS_48 ? (ts as any).getModifiers : node => node.modifiers;
+    IS_AFTER_TS_48 ? (ts.getModifiers as (node: ts.Node) => readonly ts.Modifier[] | undefined)
+        : node => (node as any).modifiers;
 
 /**
  * Combines an optional array of decorators with an optional array of modifiers into a single
@@ -341,3 +343,10 @@ function isAfterVersion(targetMajor: number, targetMinor: number): boolean {
 
   return major === targetMajor ? minor >= targetMinor : true;
 }
+
+export function toMutableArray<T>(immutableArray: readonly T[] | undefined): T[] | undefined {
+  if (immutableArray) {
+    return [...immutableArray];
+  }
+  return undefined;
+}

src/transformers/downlevel_decorators_transform/downlevel_decorators_transform.ts

@@ -436,7 +436,7 @@ export function getDownlevelDecoratorsTransform(
       const modifiers = decoratorsToKeep.length ?
           ts.setTextRange(
               ts.factory.createNodeArray(combineModifiers(decoratorsToKeep, getModifiers(element))),
-              element.modifiers) :
+            (element as any).modifiers) :
           getModifiers(element);
 
       return [element.name.text, cloneClassElementWithModifiers(element, modifiers), toLower];

src/transformers/replace-resources.ts

@@ -9,6 +9,7 @@ import type { TsCompilerInstance } from 'ts-jest';
 import ts from 'typescript';
 
 import { STYLES, STYLE_URLS, TEMPLATE_URL, TEMPLATE, REQUIRE, COMPONENT, STYLE_URL } from '../constants';
+import { getDecorators, getModifiers, toMutableArray } from '../ngtsc/ts_compatibility';
 
 const isAfterVersion = (targetMajor: number, targetMinor: number): boolean => {
   const [major, minor] = ts.versionMajorMinor.split('.').map((part) => parseInt(part));
@@ -24,6 +25,9 @@ const isAfterVersion = (targetMajor: number, targetMinor: number): boolean => {
 
 const IS_TS_48 = isAfterVersion(4, 8);
 
+/** Whether the current TypeScript version is after 5.0. */
+const IS_AFTER_TS_50 = isAfterVersion(5, 0);
+
 const shouldTransform = (fileName: string) => !fileName.endsWith('.ngfactory.ts') && !fileName.endsWith('.ngstyle.ts');
 /**
  * Source https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/transformers/replace_resources.ts
@@ -77,7 +81,7 @@ export function replaceResources({ program }: TsCompilerInstance): ts.Transforme
         return sourceFile;
       }
 
-      const updatedSourceFile = ts.visitNode(sourceFile, visitNode);
+      const updatedSourceFile = ts.visitNode(sourceFile, visitNode) as ts.SourceFile;
       if (resourceImportDeclarations.length) {
         // Add resource imports
         return nodeFactory.updateSourceFile(
@@ -115,8 +119,8 @@ function visitClassDeclaration(
       }
     });
   } else {
-    decorators = node.decorators as unknown as ts.Decorator[];
-    modifiers = node.modifiers as unknown as ts.Modifier[];
+    decorators = toMutableArray(getDecorators(node));
+    modifiers = toMutableArray(getModifiers(node));
   }
 
   if (!decorators || !decorators.length) {
@@ -127,6 +131,7 @@ function visitClassDeclaration(
     visitDecorator(nodeFactory, current, typeChecker, resourceImportDeclarations, moduleKind),
   );
 
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   return IS_TS_48
     ? nodeFactory.updateClassDeclaration(
         node,
@@ -136,7 +141,7 @@ function visitClassDeclaration(
         node.heritageClauses,
         node.members,
       )
-    : nodeFactory.updateClassDeclaration(
+    : (nodeFactory as any).updateClassDeclaration(
         node,
         decorators,
         modifiers,
@@ -145,6 +150,7 @@ function visitClassDeclaration(
         node.heritageClauses,
         node.members,
       );
+  /* eslint-enable @typescript-eslint/no-explicit-any */
 }
 
 function visitDecorator(
@@ -192,7 +198,8 @@ function visitDecorator(
   return nodeFactory.updateDecorator(
     node,
     nodeFactory.updateCallExpression(decoratorFactory, decoratorFactory.expression, decoratorFactory.typeArguments, [
-      nodeFactory.updateObjectLiteralExpression(objectExpression, properties),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      nodeFactory.updateObjectLiteralExpression(objectExpression, properties as any),
     ]),
   );
 }
@@ -280,12 +287,22 @@ function createResourceImport(
     return nodeFactory.createCallExpression(nodeFactory.createIdentifier(REQUIRE), [], [urlLiteral]);
   } else {
     const importName = nodeFactory.createIdentifier(`__NG_CLI_RESOURCE__${resourceImportDeclarations.length}`);
-    const importDeclaration = nodeFactory.createImportDeclaration(
-      undefined,
-      undefined,
-      nodeFactory.createImportClause(false, importName, undefined),
-      urlLiteral,
-    );
+    let importDeclaration: ts.ImportDeclaration;
+    if (IS_AFTER_TS_50) {
+      importDeclaration = nodeFactory.createImportDeclaration(
+        undefined,
+        nodeFactory.createImportClause(false, importName, undefined),
+        urlLiteral,
+      );
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      importDeclaration = (nodeFactory as any).createImportDeclaration(
+        undefined,
+        undefined,
+        nodeFactory.createImportClause(false, importName, undefined),
+        urlLiteral,
+      );
+    }
     resourceImportDeclarations.push(importDeclaration);
 
     return importName;