Angular upgrade from version 16 to 17 (#7085)

## Motivation for features / changes

This PR is the second step in a planned major Angular upgrade cycle,
where each major version will be delivered in a separate PR,
incrementally progressing until the project reaches Angular 21. This
specific PR upgrades TensorBoard from Angular 16 to Angular 17

## Technical description of changes
- Upgrade Angular, NgRx, and Material from v16 to v17
- Upgrade TypeScript to 5.2.2 and zone.js to 0.14
- Use Node.js 18 in Bazel and CI (required by Angular 17)
- Update build-tooling patch to match Angular 17 version
  - Fix Bazel TypeScript compiler crash caused by TypeScript 5.x
- Fix 3 snackbar tests that broke due to Material 17 behavior change
  - Remove deprecated Material legacy theme APIs  

## Screenshots of UI changes (or N/A)

## Detailed steps to verify changes work correctly (as executed by you)
 - All 2022 webapp tests pass
  - yarn lint passes with Node 18
  - App builds and runs locally

## Alternate designs / implementations considered (or N/A)

Author: cdavalos7

.github/workflows/ci.yml

@@ -310,7 +310,8 @@ jobs:
       - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
       - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
-          node-version: 16
+          # Angular v17 supports node.js versions: v18.13.0 and newer
+          node-version: 18
       - run: yarn install --ignore-engines
         # You can run `yarn fix-lint` to fix all Prettier complaints, although at this point this will try to fix too many things.
         # To fix only the files changed in this PR, see the command below.

WORKSPACE

@@ -70,24 +70,37 @@ rules_closure_dependencies(
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "c29944ba9b0b430aadcaf3bf2570fece6fc5ebfb76df145c6cdad40d65c20811",
+    sha256 = "f02557f31d4110595ca6e93660018bcd7fdfdbe7d0086089308f1b3af3a7a7ee",
     urls = [
-        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/5.7.0/rules_nodejs-5.7.0.tar.gz",
-        "https://github.com/bazelbuild/rules_nodejs/releases/download/5.7.0/rules_nodejs-5.7.0.tar.gz",
+        "https://github.com/bazelbuild/rules_nodejs/releases/download/5.8.1/rules_nodejs-5.8.1.tar.gz",
     ],
 )
 
 load("@build_bazel_rules_nodejs//:repositories.bzl", "build_bazel_rules_nodejs_dependencies")
 
 build_bazel_rules_nodejs_dependencies()
 
-load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
+load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install")
+
+# Angular 17 needs Node.js 18.17 or higher. rules_nodejs 5.8.1 does not
+# include Node 18, so we add it here manually.
+# @TODO(@cdavalos7): We plan to upgrade to a newer version of rules_nodejs that includes Node 18 and remove this manual addition in next version upgrade.
+node_repositories(
+    node_repositories = {
+        "18.20.8-darwin_arm64": ("node-v18.20.8-darwin-arm64.tar.gz", "node-v18.20.8-darwin-arm64", "bae4965d29d29bd32f96364eefbe3bca576a03e917ddbb70b9330d75f2cacd76"),
+        "18.20.8-darwin_amd64": ("node-v18.20.8-darwin-x64.tar.gz", "node-v18.20.8-darwin-x64", "ed2554677188f4afc0d050ecd8bd56effb2572d6518f8da6d40321ede6698509"),
+        "18.20.8-linux_arm64": ("node-v18.20.8-linux-arm64.tar.xz", "node-v18.20.8-linux-arm64", "224e569dbe7b0ea4628ce383d9d482494b57ee040566583f1c54072c86d1116b"),
+        "18.20.8-linux_amd64": ("node-v18.20.8-linux-x64.tar.xz", "node-v18.20.8-linux-x64", "5467ee62d6af1411d46b6a10e3fb5cacc92734dbcef465fea14e7b90993001c9"),
+        "18.20.8-windows_amd64": ("node-v18.20.8-win-x64.zip", "node-v18.20.8-win-x64", "1a1e40260a6facba83636e4cd0ba01eb5bd1386896824b36645afba44857384a"),
+    },
+    node_version = "18.20.8",
+)
 
 yarn_install(
     name = "npm",
     data = [
-        "//patches:@angular+build-tooling+0.0.0-7d103b83a07f132629592fc9918ce17d42a5e382.patch",
-        "//patches:@bazel+concatjs+5.7.0.patch",
+        "//patches:@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
+        "//patches:@bazel+concatjs+5.8.1.patch",
     ],
     # "Some rules only work by referencing labels nested inside npm packages
     # and therefore require turning off exports_directories_only."

package.json

@@ -28,18 +28,18 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.9",
-    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#fb42478534df7d48ec23a6834fea94a776cb89a0",
-    "@angular/cli": "^16.2.0",
-    "@angular/compiler": "16.2.12",
-    "@angular/compiler-cli": "^16.2.12",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#3069be882e3e41cdb3dad58788d878e31d7d82e8",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler": "17.3.12",
+    "@angular/compiler-cli": "^17.0.0",
     "@babel/core": "^7.16.12",
-    "@bazel/concatjs": "5.7.0",
-    "@bazel/esbuild": "5.7.0",
+    "@bazel/concatjs": "5.8.1",
+    "@bazel/esbuild": "5.8.1",
     "@bazel/ibazel": "^0.15.9",
-    "@bazel/jasmine": "5.7.0",
-    "@bazel/terser": "5.7.0",
-    "@bazel/typescript": "5.7.0",
+    "@bazel/jasmine": "5.8.1",
+    "@bazel/terser": "5.8.1",
+    "@bazel/typescript": "5.8.1",
     "@types/d3": "5.7.2",
     "@types/jasmine": "^3.8.2",
     "@types/lodash": "^4.14.172",
@@ -61,22 +61,22 @@
     "prettier-plugin-organize-imports": "2.3.4",
     "requirejs": "^2.3.7",
     "tslib": "^2.3.0",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^16.2.14",
-    "@angular/common": "16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/forms": "^16.2.12",
-    "@angular/localize": "^16.2.12",
-    "@angular/material": "^16.2.14",
-    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^16.2.12",
-    "@ngrx/effects": "^15.4.0",
-    "@ngrx/store": "^15.4.0",
+    "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.0",
+    "@angular/common": "17.3.12",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/localize": "^17.0.0",
+    "@angular/material": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "@ngrx/effects": "^17.0.0",
+    "@ngrx/store": "^17.0.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",
@@ -131,7 +131,7 @@
     "three": "~0.137.0",
     "umap-js": "^1.3.2",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.0"
   },
   "resolutions": {
     "@types/d3-brush": "1.1.8",

patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch

@@ -0,0 +1,33 @@
+diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
+index 870da1b..3f1e5c5 100755
+--- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
++++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
+@@ -23,6 +23,7 @@ js_library(
+     deps = [
+         "@npm//@babel/core",
+         "@npm//@babel/helper-annotate-as-pure",
++        "@npm//@babel/helper-split-export-declaration",
+     ],
+ )
+ 
+diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
+index 6d5ec3f..ad4217f 100755
+--- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
++++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
+@@ -86,11 +86,11 @@ export async function createEsbuildAngularOptimizePlugin(opts, additionalBabelPl
+             devkitOptimizePlugins.adjustTypeScriptEnumsPlugin,
+           );
+ 
+-          // If the current file is denoted as explicit side effect free, add the pure
+-          // top-level functions optimization plugin for this file.
+-          if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
+-            plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
+-          }
++          // For TensorBoard: This plugin aggressively culls symbols in a way that
++          // is incompatible with TensorBoard source. Disable it. As result the binary is bigger.
++          //if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
++          //  plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
++          //}
+         }
+ 
+         const shouldRunLinker =

patches/@angular+build-tooling+0.0.0-7d103b83a07f132629592fc9918ce17d42a5e382.patch

@@ -28,24 +28,17 @@ index fed787a..377915a 100755
      return struct(
          closure_js = closure_js_files,
          devmode_js = devmode_js_files,
-diff --git a/node_modules/@bazel/concatjs/web_test/karma.conf.js b/node_modules/@bazel/concatjs/web_test/karma.conf.js
-index 90a03ef..28778c9 100755
---- a/node_modules/@bazel/concatjs/web_test/karma.conf.js
-+++ b/node_modules/@bazel/concatjs/web_test/karma.conf.js
-@@ -384,7 +384,15 @@ try {
-             conf.browsers.push(launcher);
-           } else {
-             const launcher = 'CustomChrome';
--            conf.customLaunchers = {[launcher]: {base: browser, flags: additionalArgs}};
-+            // For TensorBoard: Patch the CustomChrome launcher so that even it
-+            // specifies the --no-sandbox flag. This is to workaround
-+            // incompatibilities with some environments.
-+            //
-+            // Specifically we were seeing errors like:
-+            // [WARNING:gpu_process_host.cc(1228)] The GPU process has crashed 6 time(s)
-+            // [FATAL:gpu_data_manager_impl_private.cc(439)] GPU process isn't usable. Goodbye.
-+            conf.customLaunchers =
-+                {[launcher]: {base: browser, flags: ['--no-sandbox', ...additionalArgs]}};
-             conf.browsers.push(launcher);
-           }
-         }
+diff --git a/node_modules/@bazel/concatjs/package.json b/node_modules/@bazel/concatjs/package.json
+index 1234567..abcdefg 100755
+--- a/node_modules/@bazel/concatjs/package.json
++++ b/node_modules/@bazel/concatjs/package.json
+@@ -24,7 +24,8 @@
+     "dependencies": {
+         "protobufjs": "6.8.8",
+         "source-map-support": "0.5.9",
+-        "tsutils": "3.21.0"
++        "tsutils": "3.21.0",
++        "typescript": "5.2.2"
+     },
+     "peerDependencies": {
+         "karma": ">=4.0.0",

patches/@bazel+concatjs+5.7.0.patch patches/@bazel+concatjs+5.8.1.patchpatches/@bazel+concatjs+5.7.0.patch renamed to patches/@bazel+concatjs+5.8.1.patch

@@ -7,14 +7,39 @@ After creating or updating a patch, ensure there is no trailing whitespace on
 any line (CI runs `./tensorboard/tools/whitespace_hygiene_test.py`). You can
 strip it with `sed -i '' 's/[[:space:]]*$//' patches/<patch-file>.patch`.
 
-To regenerate @bazel/concatjs patch:
-* `vi node_modules/@bazel/concatjs/web_test/karma.conf.js`
+## `@bazel+concatjs+5.8.1.patch`
+
+**Modified files:**
+- `node_modules/@bazel/concatjs/internal/common/compilation.bzl`
+- `node_modules/@bazel/concatjs/package.json`
+
+**What it does:**
+Updated patch from 5.7.0 to 5.8.1. This version already includes the TypeScript 5.x fix and Chrome sandbox fix that we had to patch manually in 5.7.0.
+Added typescript as a direct dependency because the Bazel sandbox can't find it otherwise.
+
+Why 5.8.1 and not 6.x: rules_nodejs 6.x removed most of the build rules we depend on (concatjs, esbuild, typescript, etc.) and moved them to a separate project (rules_js). This effort will be done in future upgrades.
+
+
+To regenerate:
+* `vi node_modules/@bazel/concatjs/internal/common/compilation.bzl`
+* `vi node_modules/@bazel/concatjs/package.json`
 * make edits
 * `yarn patch-package "@bazel/concatjs"`
 * update the WORKSPACE file with the name of the new patch file
 
 
-To regenerate @angular/build-tooling patch:
+## `@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch`
+
+**Modified files:**
+- `node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel`
+- `node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs`
+
+**What it does:**
+Updated for the Angular 17 version of build-tooling, adding the missing Babel dependency and
+Disables an optimization plugin that incorrectly removes function calls that Tensorboard depends on runtime.
+
+To regenerate:
+* `vi node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel`
 * `vi node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs`
 * make edits
 * `yarn patch-package "@angular/build-tooling"`

patches/README.md

@@ -179,7 +179,8 @@ def tf_ts_library(srcs = [], strict_checks = True, **kwargs):
         **kwargs
     )
 
-def tf_ng_web_test_suite(name, deps = [], **kwargs):
+# The external list is used to exclude node-fetch from the browser bundle since it is not compatible with browsers. This allows us to use tfjs in our web application without running into issues caused by node-fetch. @tensorflow/tfjs-core is used by vz_projector plugin.
+def tf_ng_web_test_suite(name, deps = [], external = [], **kwargs):
     """TensorBoard wrapper for the rule for a Karma web test suite.
 
     This uses the Angular team's internal toolchain for bundling
@@ -218,6 +219,7 @@ def tf_ng_web_test_suite(name, deps = [], **kwargs):
         workspace_name = "org_tensorflow_tensorboard",
         run_angular_linker = False,
         platform = "browser",
+        external = external,
     )
 
     karma_web_test_suite(

tensorboard/defs/defs.bzl

@@ -140,6 +140,20 @@ tf_ts_library(
 
 tf_ng_web_test_suite(
     name = "vz_projector_test",
+    # This vz_projector plugin depends on @tensorflow/tfjs library.
+    # tfjs is designed to run in the browser and in Node.js server, so it includes node-fetch for the Node.js side.
+    # When esbuild bundles everything for the browser, it tries to include node-fetch and fails because it can't resolve Node.js built-ins. The external list just tells esbuild to ignore those server only packages since they'll never be used in the browser.
+    external = [
+        "node-fetch",
+        "stream",
+        "http",
+        "https",
+        "url",
+        "zlib",
+        "buffer",
+        "punycode",
+        "string_decoder",
+    ],
     deps = [
         ":vz_projector_test_lib",
     ],

tensorboard/plugins/projector/vz_projector/BUILD

@@ -25,7 +25,14 @@
 import sys
 
 
-exceptions = frozenset([])
+# @TODO(@cdavalos7): Remove this exception when the patch file is no longer needed.
+# Patch files use a trailing space on blank lines to mark them as context.
+# This is required by patch-package and cannot be removed.
+exceptions = frozenset(
+    [
+        "patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
+    ]
+)
 
 
 @dataclasses.dataclass(frozen=True)