[Angular] Upgrade to v17

CHANGELOG.md

@@ -9,6 +9,15 @@ Our versioning strategy is as follows:
 - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements)
 - Major: may include breaking changes in core packages (e.g. major architectural changes, major features)
 
+## 21.8.0
+
+### 🛠 Breaking Changes
+
+`[sitecore-jss-angular]` `[sitecore-jss-schematics]` `[templates/angular]` Upgrade Angular to v17 ([#1939](https://github.com/Sitecore/jss/pull/1939))
+  - Updated Angular and core dependencies to ~17.3.11
+  - Updated Typescript to ~5.2.2
+  - Updated import statements from zone.js/dist/zone-node to zone.js
+
 ## 21.7.1
 
 ### 🐛 Bug Fixes

packages/create-sitecore-jss/src/templates/angular/package.json

@@ -48,50 +48,50 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "~16.2.10",
-    "@angular/common": "~16.2.10",
-    "@angular/compiler": "~16.2.10",
-    "@angular/core": "~16.2.10",
-    "@angular/forms": "~16.2.10",
-    "@angular/platform-browser": "~16.2.10",
-    "@angular/platform-browser-dynamic": "~16.2.10",
-    "@angular/platform-server": "~16.2.10",
-    "@angular/router": "~16.2.10",
+    "@angular/animations": "~17.3.12",
+    "@angular/common": "~17.3.12",
+    "@angular/compiler": "~17.3.12",
+    "@angular/core": "~17.3.12",
+    "@angular/forms": "~17.3.12",
+    "@angular/platform-browser": "~17.3.12",
+    "@angular/platform-browser-dynamic": "~17.3.12",
+    "@angular/platform-server": "~17.3.12",
+    "@angular/router": "~17.3.12",
     "@apollo/client": "^3.3.12",
-    "@ngx-translate/core": "~14.0.0",
-    "@ngx-translate/http-loader": "~7.0.0",
+    "@ngx-translate/core": "~15.0.0",
+    "@ngx-translate/http-loader": "~8.0.0",
     "@sitecore-jss/sitecore-jss-angular": "~21.8.0-canary",
-    "apollo-angular": "~5.0.2",
-    "bootstrap": "^5.3.1",
-    "core-js": "~3.32.1",
+    "apollo-angular": "~6.0.0",
+    "bootstrap": "^5.3.3",
+    "core-js": "~3.37.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.1",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.13.1"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.1",
-    "@angular-devkit/build-angular": "^16.2.10",
-    "@angular-eslint/builder": "^16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.3.1",
-    "@angular-eslint/template-parser": "^16.3.1",
-    "@angular/cli": "~16.2.10",
-    "@angular/compiler-cli": "~16.2.10",
-    "@angular/language-service": "~16.2.10",
+    "@angular-builders/custom-webpack": "^17.0.2",
+    "@angular-devkit/build-angular": "^17.3.10",
+    "@angular-eslint/builder": "^17.5.3",
+    "@angular-eslint/eslint-plugin": "^17.5.3",
+    "@angular-eslint/eslint-plugin-template": "^17.5.3",
+    "@angular-eslint/schematics": "^17.5.3",
+    "@angular-eslint/template-parser": "^17.5.3",
+    "@angular/cli": "~17.3.10",
+    "@angular/compiler-cli": "~17.3.12",
+    "@angular/language-service": "~17.3.12",
     "@sitecore-jss/sitecore-jss-angular-schematics": "~21.8.0-canary",
     "@sitecore-jss/sitecore-jss-cli": "~21.8.0-canary",
     "@sitecore-jss/sitecore-jss-dev-tools": "~21.8.0-canary",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "~12.7.9",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "body-parser": "~1.19.0",
+    "@types/node": "~20.14.10",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "body-parser": "~1.20.2",
     "chalk": "~4.1.0",
     "chokidar": "^3.5.2",
     "codelyzer": "~6.0.1",
@@ -102,9 +102,9 @@
     "dotenv": "^16.0.0",
     "dotenv-webpack": "^7.1.0",
     "enhanced-resolve": "5.7.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsdoc": "32.3.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "express": "~4.17.1",
     "fs-extra": "~9.1.0",
@@ -120,8 +120,8 @@
     "move-cli": "^2.0.0",
     "npm-run-all": "~4.1.5",
     "protractor": "^7.0.0",
-    "ts-node": "~10.9.0",
-    "typescript": "~4.9.5",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.2.2",
     "yaml-lint": "^1.2.4"
   }
 }

packages/create-sitecore-jss/src/templates/angular/server.bundle.ts

@@ -2,7 +2,7 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import 'reflect-metadata';
-import 'zone.js/dist/zone-node';
+import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';

packages/create-sitecore-jss/src/templates/angular/src/polyfills.ts

@@ -47,16 +47,12 @@ import 'core-js/es/reflect';
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /** Polyfill for node.js process **/
-(window as any).process = { env: { DEBUG: undefined }, };
-
-
+(window as any).process = { env: { DEBUG: undefined } };
 
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

packages/create-sitecore-jss/src/templates/angular/src/test.ts

@@ -1,11 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

packages/sitecore-jss-angular-schematics/package.json

@@ -23,17 +23,17 @@
   },
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "~16.2.10",
-    "@angular-devkit/schematics": "~16.2.10",
-    "@schematics/angular": "~16.2.10",
+    "@angular-devkit/core": "~17.3.10",
+    "@angular-devkit/schematics": "~17.3.10",
+    "@schematics/angular": "~17.3.10",
     "chalk": "^2.4.2"
   },
   "devDependencies": {
     "@types/jasmine": "^2.8.0",
     "@types/node": "^18.19.0",
     "jasmine": "^2.99.0",
     "nyc": "^15.1.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.2.2"
   },
   "gitHead": "2f4820efddf4454eeee58ed1b2cc251969efdf5b"
 }

packages/sitecore-jss-angular/package.json

@@ -23,38 +23,38 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~16.2.10",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular/cli": "~16.2.10",
-    "@angular/common": "~16.2.10",
-    "@angular/compiler": "~16.2.10",
-    "@angular/compiler-cli": "~16.2.10",
-    "@angular/core": "~16.2.10",
-    "@angular/platform-browser": "~16.2.10",
-    "@angular/platform-browser-dynamic": "~16.2.10",
-    "@angular/router": "~16.2.10",
-    "@types/jasmine": "^3.4.1",
-    "@types/node": "^18.19.0",
+    "@angular-devkit/build-angular": "~17.3.10",
+    "@angular-eslint/eslint-plugin": "^17.5.3",
+    "@angular/cli": "~17.3.10",
+    "@angular/common": "~17.3.12",
+    "@angular/compiler": "~17.3.12",
+    "@angular/compiler-cli": "~17.3.12",
+    "@angular/core": "~17.3.12",
+    "@angular/platform-browser": "~17.3.12",
+    "@angular/platform-browser-dynamic": "~17.3.12",
+    "@angular/router": "~17.3.12",
+    "@types/jasmine": "^5.1.4",
+    "@types/node": "^20.14.10",
     "codelyzer": "^6.0.1",
-    "eslint": "~8.3.0",
+    "eslint": "~8.57.0",
     "eslint-plugin-deprecation": "^1.5.0",
-    "jasmine-core": "^4.0.0",
-    "karma": "^6.4.1",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "~2.2.0",
+    "jasmine-core": "^5.1.2",
+    "karma": "^6.4.3",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-edge-launcher": "^0.4.2",
-    "karma-firefox-launcher": "^1.2.0",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^16.2.3",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^17.3.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.1",
-    "typescript": "~4.9.5",
-    "zone.js": "~0.13.3"
+    "typescript": "~5.2.2",
+    "zone.js": "~0.14.7"
   },
   "peerDependencies": {
-    "@types/debug": "^4.1.5",
+    "@types/debug": "^4.1.12",
     "rxjs": "~7.8.1"
   },
   "dependencies": {