Angular 21 upgrade

.github/workflows/ci.yml

@@ -42,15 +42,17 @@ jobs:
     # Other workflows are likely ok to use standard GH runners for now.
     # Googlers, see b/460874304.
     runs-on: linux-x86-n2-32
-    container: us-docker.pkg.dev/ml-oss-artifacts-published/ml-public-container/ml-build:latest
+    # Pinned to a digest because zizmor's unpinned-images check rejects tags.
+    # To refresh: crane digest <image>:latest
+    container: us-docker.pkg.dev/ml-oss-artifacts-published/ml-public-container/ml-build@sha256:5544b5920fb9773007a2d61400dc70ba24ef03339cc521ac5ce89abc59b40eb7
     needs: lint-python-flake8 # fail fast in case of "undefined variable" errors
     strategy:
       fail-fast: false
       matrix:
         tf_version_id: ['tf', 'notf']
         python_version: ['3.10']
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
       # Use the container's system Python installation path instead of
       # actions/setup-python so Bazel's @system_python repo sees a standard
       # interpreter/header layout.
@@ -163,7 +165,7 @@ jobs:
         # file(s) to be unique per workflow run, so make sure that the name is unique for each
         # "matrix" combination for which this is executed.
         if: matrix.tf_version_id == 'tf' && github.repository == 'tensorflow/tensorboard' && github.ref == 'refs/heads/master'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: tb-nightly_py${{ matrix.python_version }}
           path: /tmp/tb_nightly_pip_package/*
@@ -181,14 +183,14 @@ jobs:
             platform: 'ubuntu-22.04'
             rust_version: '1.65.0'
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
-      - uses: actions/setup-python@13ae5bb136fac2878aff31522b9efb785519f984 # v4.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: '3.9'
           architecture: 'x64'
       - name: 'Cache Cargo artifacts'
         if: matrix.mode == 'native'
-        uses: actions/cache@v4
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             tensorboard/data/server/target/
@@ -239,7 +241,7 @@ jobs:
             --out-dir /tmp/pip_package \
             ;
       - name: 'Upload'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: tensorboard-data-server_${{ matrix.mode }}_${{ matrix.platform }}_${{ matrix.rust_version }}
           path: /tmp/pip_package/*
@@ -254,8 +256,8 @@ jobs:
         # changes, and we want to catch them all.
         python_version: ['3.9', '3.10', '3.11']
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
-      - uses: actions/setup-python@13ae5bb136fac2878aff31522b9efb785519f984 # v4.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: ${{ matrix.python_version }}
           architecture: 'x64'
@@ -272,8 +274,8 @@ jobs:
   lint-python-yaml-docs:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
-      - uses: actions/setup-python@13ae5bb136fac2878aff31522b9efb785519f984 # v4.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: '3.10'
           architecture: 'x64'
@@ -305,9 +307,9 @@ jobs:
         rust_version: ['1.65.0']
         cargo_raze_version: ['0.16.1']
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
       - name: 'Cache Cargo artifacts'
-        uses: actions/cache@v4
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             tensorboard/data/server/target/
@@ -343,11 +345,11 @@ jobs:
   lint-frontend:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
-          # Angular 19 supports Node.js 18, 20, or 22.
-          node-version: 22
+          # Angular 21 supports Node.js 20.19+, 22.12+, or 24+.
+          node-version: 24
       - 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.
@@ -375,7 +377,7 @@ jobs:
   lint-misc: # build, protos, etc.
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
       - name: 'Set up Buildifier'
         run: |
           ci/download_buildifier.sh "${BUILDTOOLS_VERSION}" "${BUILDIFIER_SHA256SUM}" ~/buildifier

WORKSPACE

@@ -217,17 +217,17 @@ build_bazel_rules_nodejs_dependencies()
 
 load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install")
 
-# Angular 19 supports Node.js 18, 20, or 22. rules_nodejs 5.8.1
-# doesn't bundle Node 22, so we add it here manually.
+# Angular 21 supports Node.js 20.19+, 22.12+, or 24+. rules_nodejs 5.8.1
+# doesn't bundle Node 24, so we add it here manually.
 node_repositories(
     node_repositories = {
-        "22.23.1-darwin_arm64": ("node-v22.23.1-darwin-arm64.tar.gz", "node-v22.23.1-darwin-arm64", "ef28d8fab2c0e4314522d4bb1b7173270aa3937e93b92cb7de79c112ac1fa953"),
-        "22.23.1-darwin_amd64": ("node-v22.23.1-darwin-x64.tar.gz", "node-v22.23.1-darwin-x64", "b8da981b8a0b1241b70249204916da76c63573ddf5814dbd2d1e41069105cb81"),
-        "22.23.1-linux_arm64": ("node-v22.23.1-linux-arm64.tar.xz", "node-v22.23.1-linux-arm64", "0294e8b915ab75f92c7513d2fcb830ae06e10684e6c603e99a87dbf8835389c1"),
-        "22.23.1-linux_amd64": ("node-v22.23.1-linux-x64.tar.xz", "node-v22.23.1-linux-x64", "9749e988f437343b7fa832c69ded82a312e41a03116d766797ac14f6f9eee578"),
-        "22.23.1-windows_amd64": ("node-v22.23.1-win-x64.zip", "node-v22.23.1-win-x64", "7df0bc9375723f4a86b3aa1b7cc73342423d9677a8df4538aca31a049e309c29"),
+        "24.18.0-darwin_arm64": ("node-v24.18.0-darwin-arm64.tar.gz", "node-v24.18.0-darwin-arm64", "e1a97e14c99c803e96c7339403282ea05a499c32f8d83defe9ef5ec66f979ed1"),
+        "24.18.0-darwin_amd64": ("node-v24.18.0-darwin-x64.tar.gz", "node-v24.18.0-darwin-x64", "dfd0dbd3e721503434df7b7205e719f61b3a3a31b2bcf9729b8b91fea240f080"),
+        "24.18.0-linux_arm64": ("node-v24.18.0-linux-arm64.tar.xz", "node-v24.18.0-linux-arm64", "58c9520501f6ae2b52d5b210444e24b9d0c029a58c5011b797bc1fe7105886f6"),
+        "24.18.0-linux_amd64": ("node-v24.18.0-linux-x64.tar.xz", "node-v24.18.0-linux-x64", "55aa7153f9d88f28d765fcdad5ae6945b5c0f98a36881703817e4c450fa76742"),
+        "24.18.0-windows_amd64": ("node-v24.18.0-win-x64.zip", "node-v24.18.0-win-x64", "0ae68406b42d7725661da979b1403ec9926da205c6770827f33aac9d8f26e821"),
     },
-    node_version = "22.23.1",
+    node_version = "24.18.0",
 )
 
 yarn_install(

package.json

@@ -28,12 +28,12 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.0.0",
-    "@angular/build": "^20.0.0",
+    "@angular-devkit/build-angular": "^21.0.0",
+    "@angular/build": "^21.0.0",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#b87de6c1190eb38a74ce72a530331f2f184fe918",
-    "@angular/cli": "^20.0.0",
-    "@angular/compiler": "20.3.25",
-    "@angular/compiler-cli": "^20.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler": "21.2.18",
+    "@angular/compiler-cli": "^21.0.0",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.8.1",
     "@bazel/esbuild": "5.8.1",
@@ -62,22 +62,22 @@
     "prettier-plugin-organize-imports": "2.3.4",
     "requirejs": "^2.3.7",
     "tslib": "^2.3.0",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/cdk": "^20.0.0",
-    "@angular/common": "20.3.25",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/localize": "^20.0.0",
-    "@angular/material": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@ngrx/effects": "^20.0.0",
-    "@ngrx/store": "^20.0.0",
+    "@angular/animations": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "21.2.18",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/localize": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@ngrx/effects": "^21.0.0",
+    "@ngrx/store": "^21.0.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",

patches/@bazel+concatjs+5.8.1.patch

@@ -5,7 +5,7 @@ index fed787a..377915a 100755
 @@ -160,25 +160,11 @@ def _outputs(ctx, label, srcs_files = []):
          closure_js_file = ctx.actions.declare_file(basename + ".mjs")
          closure_js_files.append(closure_js_file)
-
+ 
 -        # Temporary until all imports of ngfactory/ngsummary files are removed
 -        # TODO(alexeagle): clean up after Ivy launch
 -        if getattr(ctx.attr, "use_angular_plugin", False):
@@ -28,8 +28,61 @@ index fed787a..377915a 100755
      return struct(
          closure_js = closure_js_files,
          devmode_js = devmode_js_files,
+diff --git a/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl b/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
+index b01c999..86d61d4 100755
+--- a/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
++++ b/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
+@@ -110,6 +110,48 @@ def create_tsconfig(
+             "*": node_modules_mappings,
+             ctx.workspace_name + "/*": base_path_mappings,
+         }
++
++        # Starting with Angular 21, the definition files (*.d.ts) were moved into
++        # one folder, "types/<name>.d.ts", per package; before, we found each one
++        # in its own corresponding folder. These are now resolved only via
++        # package.json "exports", which Bazel's node_modules mapping can't find,
++        # so below we map each package to their corresponding definition files.
++        #
++        # TODO: This patch is planned for removal. These mappings should move
++        # into a TensorBoard-owned ts_library rule under tensorboard/defs.
++        if node_modules_root:
++            for pkg in [
++                "@angular/cdk",
++                "@angular/common",
++                "@angular/core",
++                "@angular/material",
++                "@angular/platform-browser",
++                "@angular/platform-browser-dynamic",
++            ]:
++                module_roots[pkg + "/*"] = [
++                    "/".join([node_modules_root, pkg, "types/*.d.ts"]),
++                    "/".join([node_modules_root, pkg, "*"]),
++                ]
++            for entry_point, types_file in {
++                "@angular/cdk/testing/testbed": "testing-testbed",
++                "@angular/common/http/testing": "http-testing",
++                "@angular/material/checkbox/testing": "checkbox-testing",
++                "@angular/material/chips/testing": "chips-testing",
++                "@angular/material/core/testing": "core-testing",
++                "@angular/material/dialog/testing": "dialog-testing",
++                "@angular/material/form-field/testing/control": "form-field-testing-control",
++                "@angular/material/icon/testing": "icon-testing",
++                "@angular/material/menu/testing": "menu-testing",
++                "@angular/material/select/testing": "select-testing",
++                # @ngrx/* uses a package-name-prefixed types filename instead
++                # of the plain "types/<entry-point>.d.ts" Angular packages use.
++                "@ngrx/store/testing": "ngrx-store-testing",
++                "@ngrx/effects/testing": "ngrx-effects-testing",
++            }.items():
++                pkg = "/".join(entry_point.split("/")[:2])
++                module_roots[entry_point] = [
++                    "/".join([node_modules_root, pkg, "types", types_file + ".d.ts"]),
++                ]
+     module_mappings = get_module_mappings(ctx.label, ctx.attr, srcs = srcs)
+
+     # To determine the path for auto-imports, TypeScript's language service
 diff --git a/node_modules/@bazel/concatjs/package.json b/node_modules/@bazel/concatjs/package.json
-index 1234567..abcdefg 100755
+index dbc7cee..1129289 100755
 --- a/node_modules/@bazel/concatjs/package.json
 +++ b/node_modules/@bazel/concatjs/package.json
 @@ -24,7 +24,8 @@
@@ -38,7 +91,7 @@ index 1234567..abcdefg 100755
          "source-map-support": "0.5.9",
 -        "tsutils": "3.21.0"
 +        "tsutils": "3.21.0",
-+        "typescript": "5.2.2"
++        "typescript": "5.9.3"
      },
      "peerDependencies": {
          "karma": ">=4.0.0",

patches/README.md

@@ -13,39 +13,76 @@ 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`.
 
+**Important:** `patch-package` defaults to `--exclude '/package\.json$/'`, so a
+plain `yarn patch-package "<pkg>"` silently drops any changes to the package's
+`package.json`. Pass `--exclude '^$'` whenever the patch needs to modify that
+file, and always review `git diff patches/` after regenerating to confirm no
+hunk disappeared.
+
 ## `@bazel+concatjs+5.8.1.patch`
 
 **Modified files:**
-- `node_modules/@bazel/concatjs/internal/common/compilation.bzl`
-- `node_modules/@bazel/concatjs/package.json`
+* `node_modules/@bazel/concatjs/internal/common/compilation.bzl`
+* `node_modules/@bazel/concatjs/internal/common/tsconfig.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.
+Three independent changes:
+
+1. `compilation.bzl` stops declaring `*.ngfactory.*` and `*.ngsummary.*` outputs
+   when `use_angular_plugin = True`. Ivy no longer emits those files, so Bazel
+   failed with "declared output was not created".
+2. `tsconfig.bzl` adds `module_roots` entries mapping each Angular, Material,
+   CDK and NgRx entry point to its `types/<name>.d.ts` file. Starting with
+   Angular 21, APF packaging exposes type definitions only through
+   `package.json` `"exports"`, which the Bazel `node_modules` path mapping
+   cannot resolve.
+3. `package.json` adds `typescript` as a direct dependency because the Bazel
+   sandbox cannot find it otherwise.
+
+Note that putting the mappings from (2) in the workspace `tsconfig.json` does not
+work: the tsconfig Bazel generates does `extends` the workspace one, but it also
+writes its own `compilerOptions.paths`, and TypeScript replaces `paths` wholesale
+instead of merging it.
 
 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.
 
+Removal is planned. `@bazel/concatjs` 5.8.1 is the last published version and
+rules_nodejs is archived, so no upstream fix is coming. The near-term plan is to
+move the `tsconfig.bzl` mappings and the `compilation.bzl` outputs override into
+a TensorBoard-owned `ts_library` rule under `tensorboard/defs`, which reuses
+concatjs `compile_ts` without patching it. See the `TODO` in the `tsconfig.bzl`
+hunk.
 
 To regenerate:
 * `vi node_modules/@bazel/concatjs/internal/common/compilation.bzl`
+* `vi node_modules/@bazel/concatjs/internal/common/tsconfig.bzl`
 * `vi node_modules/@bazel/concatjs/package.json`
 * make edits
-* `yarn patch-package "@bazel/concatjs"`
+* `yarn patch-package "@bazel/concatjs" --exclude '^$'` (the `--exclude` is
+  required, otherwise the `package.json` hunk is dropped)
 * update the WORKSPACE file with the name of the new patch file
 
 
-## `@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch`
+## `@angular+build-tooling+0.0.0-98b30ab5fdeeb1df3278f5257b9a8f07abb76941.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`
+* `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.
+Disables the `markTopLevelPure` optimization plugin, which culls top-level
+function calls that TensorBoard depends on at runtime. Without this, the app
+bundles to a blank page with no console error. The resulting bundle is larger.
+
+Note the patch file name tracks the pinned `@angular/build-tooling` commit, so it
+has to be renamed (and the WORKSPACE reference updated) whenever that dependency
+is bumped.
+
+Removal is planned along with the concatjs patch. `@angular/build-tooling` is
+frozen upstream, and both patches only go away once the frontend build moves off
+rules_nodejs.
 
 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"`

tensorboard/tools/whitespace_hygiene_test.py

@@ -30,6 +30,7 @@
 exceptions = frozenset(
     [
         "patches/protobuf_6_31_1_java_export.patch",
+        "patches/@bazel+concatjs+5.8.1.patch",
     ]
 )
 

tensorboard/webapp/app_module.ts

@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {NgModule} from '@angular/core';
+import {NgModule, provideZoneChangeDetection} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {PluginApiHostModule} from '../components/experimental/plugin_util/plugin_api_host_module';
@@ -71,6 +71,7 @@ import {TensorBoardWrapperModule} from './tb_wrapper/tb_wrapper_module';
     StoreModule,
     OssPluginsModule,
   ],
+  providers: [provideZoneChangeDetection()],
   bootstrap: [AppContainer],
 })
 export class AppModule {}

tensorboard/webapp/header/header_test.ts

@@ -195,7 +195,7 @@ describe('header test', () => {
         By.css('app-header-reload button')
       );
       expect(button.properties['title']).toBe(
-        'Last Updated: Jan 1, 2000, 12:00:00 AM'
+        'Last Updated: Jan 1, 2000, 12:00:00 AM'
       );
     });