Angular 21 upgrade

.github/workflows/ci.yml

@@ -50,7 +50,7 @@ jobs:
         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 +163,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@v7
         with:
           name: tb-nightly_py${{ matrix.python_version }}
           path: /tmp/tb_nightly_pip_package/*
@@ -181,14 +181,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@v6
         with:
           path: |
             tensorboard/data/server/target/
@@ -239,7 +239,7 @@ jobs:
             --out-dir /tmp/pip_package \
             ;
       - name: 'Upload'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: tensorboard-data-server_${{ matrix.mode }}_${{ matrix.platform }}_${{ matrix.rust_version }}
           path: /tmp/pip_package/*
@@ -254,8 +254,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 +272,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 +305,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@v6
         with:
           path: |
             tensorboard/data/server/target/
@@ -343,11 +343,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 +375,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,58 @@ 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..910a52d 100755
+--- a/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
++++ b/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
+@@ -110,6 +110,45 @@ 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.
++        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 +88,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",

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'
       );
     });
 

tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts

@@ -878,8 +878,8 @@ describe('scalar card line chart', () => {
       ]);
 
       assertTooltipRows(fixture, [
-        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '3 yr'],
-        ['', 'Row 2', '-1000', '1,000', '12/31/20, 12:00 AM', '0'],
+        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '3 yr'],
+        ['', 'Row 2', '-1000', '1,000', '12/31/20, 12:00 AM', '0'],
       ]);
     }));
 
@@ -945,14 +945,14 @@ describe('scalar card line chart', () => {
       ]);
 
       assertTooltipRows(fixture, [
-        ['', 'Row 1', '1e+7', '1e+7', '10', '1/1/20, 12:00 AM', '10 ms'],
+        ['', 'Row 1', '1e+7', '1e+7', '10', '1/1/20, 12:00 AM', '10 ms'],
         [
           '',
           'Row 2',
           '-5e-4',
           '-0.9312',
           '1,000',
-          '12/31/20, 12:00 AM',
+          '12/31/20, 12:00 AM',
           '5 sec',
         ],
       ]);
@@ -1025,8 +1025,8 @@ describe('scalar card line chart', () => {
       ]);
 
       expect(tableContent).toEqual([
-        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '10 ms'],
-        ['', 'Row 2', '-1000', '1,000', '1/5/20, 12:00 AM', '5 day'],
+        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '10 ms'],
+        ['', 'Row 2', '-1000', '1,000', '1/5/20, 12:00 AM', '5 day'],
       ]);
     }));
 

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -1379,8 +1379,8 @@ describe('scalar card', () => {
       ]);
 
       assertTooltipRows(fixture, [
-        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '3 yr'],
-        ['', 'Row 2', '-1000', '1,000', '12/31/20, 12:00 AM', '0'],
+        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '3 yr'],
+        ['', 'Row 2', '-1000', '1,000', '12/31/20, 12:00 AM', '0'],
       ]);
     }));
 
@@ -1446,7 +1446,7 @@ describe('scalar card', () => {
       ]);
 
       assertTooltipRows(fixture, [
-        ['', 'Row 1', '1e+7', '1e+7', '10', '1/1/20, 12:00 AM', '10 ms'],
+        ['', 'Row 1', '1e+7', '1e+7', '10', '1/1/20, 12:00 AM', '10 ms'],
         // Print the step with comma for readability. The value is yet optimize for
         // readability (we may use the scientific formatting).
         [
@@ -1455,7 +1455,7 @@ describe('scalar card', () => {
           '-5e-4',
           '-0.9312',
           '1,000',
-          '12/31/20, 12:00 AM',
+          '12/31/20, 12:00 AM',
           '5 sec',
         ],
       ]);
@@ -1530,8 +1530,8 @@ describe('scalar card', () => {
       });
 
       expect(tableContent).toEqual([
-        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '10 ms'],
-        ['', 'Row 2', '-1000', '1,000', '1/5/20, 12:00 AM', '5 day'],
+        ['', 'Row 1', '1000', '10', '1/1/20, 12:00 AM', '10 ms'],
+        ['', 'Row 2', '-1000', '1,000', '1/5/20, 12:00 AM', '5 day'],
       ]);
     }));
 

tensorboard/webapp/metrics/views/main_view/filter_input_test.ts

@@ -152,10 +152,9 @@ describe('metrics filter input', () => {
       expect(options.map((option) => option.nativeElement.textContent)).toEqual(
         tags.slice(0, 25)
       );
-      expect(
-        overlayContainer.getContainerElement().querySelector('.and-more')!
-          .textContent
-      ).toEqual('and 5 more tags matched');
+      expect(document.body.querySelector('.and-more')!.textContent).toEqual(
+        'and 5 more tags matched'
+      );
 
       store.overrideSelector(
         selectors.getNonEmptyCardIdsWithMetadata,
@@ -166,9 +165,7 @@ describe('metrics filter input', () => {
       expect(options.map((option) => option.nativeElement.textContent)).toEqual(
         tags.slice(0, 25)
       );
-      expect(
-        overlayContainer.getContainerElement().querySelector('.and-more')
-      ).toBeNull();
+      expect(document.body.querySelector('.and-more')).toBeNull();
     });
 
     it('renders empty when no tags match', () => {