TB Angular upgrade v22

package.json

@@ -28,12 +28,12 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^21.0.0",
-    "@angular/build": "^21.0.0",
+    "@angular-devkit/build-angular": "^22.0.0",
+    "@angular/build": "^22.0.0",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#b87de6c1190eb38a74ce72a530331f2f184fe918",
-    "@angular/cli": "^21.0.0",
-    "@angular/compiler": "21.2.18",
-    "@angular/compiler-cli": "^21.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler": "22.1.1",
+    "@angular/compiler-cli": "^22.0.0",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.8.1",
     "@bazel/esbuild": "5.8.1",
@@ -62,20 +62,20 @@
     "prettier-plugin-organize-imports": "2.3.4",
     "requirejs": "^2.3.7",
     "tslib": "^2.3.0",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@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",
+    "@angular/animations": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "22.1.1",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/localize": "^22.0.0",
+    "@angular/material": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/router": "^22.0.0",
     "@ngrx/effects": "^21.0.0",
     "@ngrx/store": "^21.0.0",
     "@polymer/decorators": "^3.0.0",

patches/@bazel+concatjs+5.8.1.patch

@@ -29,27 +29,28 @@ index fed787a..377915a 100755
          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
+index b01c999..f9684f8 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(
+@@ -110,6 +110,49 @@ 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.
++        # Starting with Angular 21, each package's *.d.ts files moved into a single
++        # "types/<name>.d.ts" folder, resolved only through package.json "exports",
++        # which Bazel's node_modules mapping cannot follow. So map each package to its
++        # definition files here. This whole patch goes away with the rules_js / rules_ts
++        # migration, which resolves "exports" natively.
 +        if node_modules_root:
 +            for pkg in [
 +                "@angular/cdk",
 +                "@angular/common",
 +                "@angular/core",
++                # TypeScript 6.0 added error TS2882 for side-effect imports whose types
++                # do not resolve, and bootstrap.ts imports "@angular/localize/init" for
++                # its side effect only.
++                "@angular/localize",
 +                "@angular/material",
 +                "@angular/platform-browser",
 +                "@angular/platform-browser-dynamic",
@@ -69,8 +70,8 @@ index b01c999..86d61d4 100755
 +                "@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/* uses a package-name-prefixed types filename instead of the
++                # plain "types/<entry-point>.d.ts" that Angular packages use.
 +                "@ngrx/store/testing": "ngrx-store-testing",
 +                "@ngrx/effects/testing": "ngrx-effects-testing",
 +            }.items():
@@ -81,17 +82,37 @@ index b01c999..86d61d4 100755
      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 dbc7cee..1129289 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.9.3"
-     },
-     "peerDependencies": {
-         "karma": ">=4.0.0",
+diff --git a/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js b/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
+index e049d15..9ebeec4 100755
+--- a/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
++++ b/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
+@@ -66,6 +66,13 @@ function parseTsconfig(tsconfigFile, host = ts.sys) {
+                     : existingBazelOpts.googmodule, devmodeTargetOverride: isUndefined(existingBazelOpts.devmodeTargetOverride)
+                     ? newBazelBazelOpts.devmodeTargetOverride
+                     : existingBazelOpts.devmodeTargetOverride });
++            // Same reasoning as the bazelOptions merge above, applied to the top-level
++            // "angularCompilerOptions" block. Without this the block in the root
++            // tsconfig.json is silently dropped, because only the generated per-target
++            // tsconfig is ever inspected. The nearer config wins, like "extends" does.
++            if (config.angularCompilerOptions) {
++                mergedConfig.angularCompilerOptions = Object.assign({}, config.angularCompilerOptions, existingConfig.angularCompilerOptions || {});
++            }
+         }
+         if (config.extends) {
+             let extendedConfigPath = resolveNormalizedPath(path.dirname(configFile), config.extends);
+@@ -145,6 +152,15 @@ function parseTsconfig(tsconfigFile, host = ts.sys) {
+         bazelOpts.nodeModulesPrefix =
+             resolveNormalizedPath(options.rootDir, bazelOpts.nodeModulesPrefix);
+     }
++    // NgTscPlugin is built from bazelOptions.angularCompilerOptions, so user options
++    // carried up the extends chain above must be folded in here or the Angular compiler
++    // never sees them. The guard matters: that object already existing is what marks a
++    // target as use_angular_plugin, so creating it here would load the Angular plugin
++    // for plain ts_library targets too. Bazel's own keys win, being build mechanics
++    // rather than user choice.
++    if (bazelOpts.angularCompilerOptions && config.angularCompilerOptions) {
++        bazelOpts.angularCompilerOptions = Object.assign({}, config.angularCompilerOptions, bazelOpts.angularCompilerOptions);
++    }
+     if (bazelOpts.angularCompilerOptions && bazelOpts.angularCompilerOptions.assets) {
+         bazelOpts.angularCompilerOptions.assets = bazelOpts.angularCompilerOptions.assets.map(f => resolveNormalizedPath(options.rootDir, f));
+     }

tensorboard/defs/BUILD

@@ -45,6 +45,27 @@ tb_proto_library(
 ts_library(
     name = "strict_types",
     srcs = ["strict_type_check.d.ts"],
+    compiler = ":tsc_wrapped",
+)
+
+# Custom ts_library compiler for non-Angular targets.
+#
+# Bazel's generated tsc_wrapped binary needs the `typescript` package at runtime,
+# but does not include it in its runfiles. This may work locally because the
+# execroot's node_modules directory is available, but fails in the sandbox.
+# Define the binary here and add `typescript` explicitly so the compiler works
+# reliably in both local and sandboxed builds.
+#
+# Angular targets use tsc_wrapped_with_angular below, which declares the Angular
+# compiler dependencies separately.
+nodejs_binary(
+    name = "tsc_wrapped",
+    data = [
+        "@npm//@bazel/concatjs",
+        "@npm//typescript",
+    ],
+    entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
+    visibility = ["//tensorboard:__subpackages__"],
 )
 
 # Custom ts_library compiler that runs tsc_wrapped with angular/compiler-cli statically linked
@@ -57,6 +78,7 @@ nodejs_binary(
         "@npm//@angular/compiler-cli",
         "@npm//@bazel/concatjs",
         "@npm//@bazel/typescript",
+        "@npm//typescript",
     ],
     entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
     # Disables the Bazel node modules linker. The node module linker is unreliable for the

tensorboard/defs/defs.bzl

@@ -144,6 +144,11 @@ def tf_ts_library(srcs = [], strict_checks = True, **kwargs):
         tsconfig = "//:tsconfig-lax"
     kwargs.setdefault("deps", []).extend(["@npm//tslib", "//tensorboard/defs:strict_types"])
 
+    # Use the custom compiler by default because the standard compiler cannot find
+    # `typescript` inside the Bazel sandbox. Angular modules provide their own
+    # compiler below, so this default does not change their configuration.
+    kwargs.setdefault("compiler", "//tensorboard/defs:tsc_wrapped")
+
     new_srcs = []
 
     # Find test.ts and testbed.ts files and rename to test.spec.ts to be

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts

@@ -278,7 +278,7 @@ export class DebugTensorHasInfOrNaNComponent {
     </debug-tensor-has-inf-or-nan>
     <debug-tensor-numeric-breakdown
       *ngIf="debugTensorValue.size !== undefined"
-      size="{{ debugTensorValue.size }}"
+      [size]="debugTensorValue.size"
       [numNegativeInfs]="debugTensorValue.numNegativeInfs"
       [numPositiveInfs]="debugTensorValue.numPositiveInfs"
       [numNaNs]="debugTensorValue.numNaNs"

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts

@@ -42,7 +42,7 @@ export class ExecutionDataComponent {
 
   /** Debug tensor values under non-FULL_TENSOR debug modes. */
   @Input()
-  debugTensorValues: number[][] | null = null;
+  debugTensorValues: (number[] | null)[] | null = null;
 
   /**
    * Dtypes of the tensors.

tensorboard/webapp/core/views/layout_container.ts

@@ -41,7 +41,7 @@ import {
       <mat-icon svgIcon="expand_more_24px"></mat-icon>
     </button>
     <nav
-      *ngIf="(width$ | async) > 0"
+      *ngIf="((width$ | async) ?? 0) > 0"
       class="sidebar"
       [style.width.%]="width$ | async"
       [style.minWidth.px]="MINIMUM_SIDEBAR_WIDTH_IN_PX"
@@ -70,7 +70,7 @@ import {
       </div>
     </nav>
     <div
-      *ngIf="(width$ | async) > 0"
+      *ngIf="((width$ | async) ?? 0) > 0"
       class="resizer"
       (mousedown)="resizeGrabbed()"
     ></div>

tensorboard/webapp/customization/customization_test.ts

@@ -15,8 +15,10 @@ limitations under the License.
 import {
   ChangeDetectionStrategy,
   Component,
+  Inject,
   NgModule,
   Optional,
+  Type,
 } from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {CustomizationModule} from './customization_module';
@@ -43,7 +45,9 @@ export class CustomizableComponentType {}
 })
 export class ParentComponent {
   constructor(
-    @Optional() readonly customizableComponent: CustomizableComponentType
+    @Inject(CustomizableComponentType)
+    @Optional()
+    readonly customizableComponent: Type<unknown>
   ) {}
 }
 

tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ng.html

@@ -63,7 +63,9 @@ <h2 class="warning">WARNING: EXPERIMENTAL FEATURES AHEAD!</h2>
           </mat-select>
         </ng-template>
         <ng-template #unsupportedBlock>
-          <td>Unsupported By UI {{formatFlagValue(flagStatus.value)}}</td>
+          <td>
+            Unsupported By UI {{formatFlagValue(flagStatus.defaultValue)}}
+          </td>
         </ng-template>
       </tr>
     </ng-container>

tensorboard/webapp/feature_flag/views/feature_flag_dialog_test.ts

@@ -186,7 +186,7 @@ describe('feature_flag_dialog_container', () => {
     expect(dataCells.length).toEqual(3);
     const selectors = component.querySelectorAll('mat-select');
     expect(selectors.length).toEqual(1);
-    expect(dataCells[2].innerText).toBe('Unsupported By UI - null');
+    expect(dataCells[2].innerText).toBe('Unsupported By UI - []');
   });
 
   describe('formatFlagValue', () => {

tensorboard/webapp/header/plugin_selector_component.ng.html

@@ -35,11 +35,7 @@
     </ng-template>
   </mat-tab>
 </mat-tab-group>
-<mat-form-field
-  floatLabel="never"
-  *ngIf="disabledPlugins.length > 0"
-  subscriptSizing="dynamic"
->
+<mat-form-field *ngIf="disabledPlugins.length > 0" subscriptSizing="dynamic">
   <mat-label>Inactive</mat-label>
   <mat-select
     [value]="selectedPlugin"

tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ng.html

@@ -41,7 +41,7 @@ <h2>
         cdkFocusInitial
         required
         [value]="selectedRunId || ''"
-        (change)="runSelected.emit($event.target.value)"
+        (change)="runSelected.emit($any($event.target).value)"
       >
         <option selected [value]="''">-</option>
         <!-- There is no guarantee that the run.name is unique but run.id is.-->

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -121,7 +121,6 @@
       [tooltipTemplate]="tooltip"
       [useDarkMode]="useDarkMode"
       [userViewBox]="userViewBox"
-      (onViewBoxOverridden)="isViewBoxOverridden = $event"
       (viewBoxChanged)="onLineChartZoom.emit($event)"
       [customVisTemplate]="lineChartCustomVis"
       [customChartOverlayTemplate]="lineChartCustomXAxisVis"
@@ -215,7 +214,6 @@
       (editColumnHeaders)="editColumnHeaders.emit($event)"
       (addColumn)="addColumn.emit($event)"
       (removeColumn)="removeColumn.emit($event)"
-      (hideColumn)="hideColumn.emit($event)"
       (addFilter)="addFilter.emit($event)"
       (loadAllColumns)="loadAllColumns.emit()"
     >
@@ -269,7 +267,7 @@
         xScale.forward(
           viewExtent.x,
           [0, domDim.width],
-          stepOrLinkedTimeSelection.end?.step
+          stepOrLinkedTimeSelection.end.step
         ) + 'px'
       "
     ></div>

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

@@ -53,6 +53,7 @@ import {
 import {
   MinMaxStep,
   ScalarCardDataSeries,
+  ScalarCardPoint,
   ScalarCardSeriesMetadata,
   ScalarCardSeriesMetadataMap,
 } from './scalar_card_types';
@@ -72,7 +73,8 @@ import {RunToHparamMap} from '../../../runs/types';
 type ScalarTooltipDatum = TooltipDatum<
   ScalarCardSeriesMetadata & {
     closest: boolean;
-  }
+  },
+  ScalarCardPoint
 >;
 
 @Component({
@@ -89,7 +91,7 @@ export class ScalarCardComponent<Downloader> {
 
   @Input() cardId!: string;
   @Input() chartMetadataMap!: ScalarCardSeriesMetadataMap;
-  @Input() cardState?: CardState;
+  @Input() cardState?: Partial<CardState>;
   @Input() DataDownloadComponent!: ComponentType<Downloader>;
   @Input() dataSeries!: ScalarCardDataSeries[];
   @Input() ignoreOutliers!: boolean;
@@ -154,7 +156,6 @@ export class ScalarCardComponent<Downloader> {
   constructor(private readonly ref: ElementRef, private dialog: MatDialog) {}
 
   yScaleType = ScaleType.LINEAR;
-  isViewBoxOverridden: boolean = false;
   additionalItemsCount = 0;
 
   toggleYScaleType() {
@@ -194,7 +195,7 @@ export class ScalarCardComponent<Downloader> {
   }
 
   getCursorAwareTooltipData(
-    tooltipData: TooltipDatum<ScalarCardSeriesMetadata>[],
+    tooltipData: TooltipDatum<ScalarCardSeriesMetadata, ScalarCardPoint>[],
     cursorLocationInDataCoord: {x: number; y: number},
     cursorLocation: {x: number; y: number}
   ): ScalarTooltipDatum[] {

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html

@@ -47,7 +47,7 @@
           <tb-data-table-content-cell
             *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
             [header]="header"
-            [datum]="dataRow[header.name]"
+            [datum]="$any(dataRow[header.name])"
           >
             <div
               *ngIf="header.type === ColumnHeaderType.COLOR"

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

@@ -34,7 +34,7 @@ import {MinMaxStep} from './scalar_card_types';
       [style.pointerEvents]="disableInteraction ? 'none' : 'all'"
       [axisDirection]="axisDirection"
       [timeSelection]="timeSelection"
-      [startStepAxisPosition]="getAxisPositionFromStartStep()"
+      [startStepAxisPosition]="$any(getAxisPositionFromStartStep())"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
       [prospectiveStepAxisPosition]="getAxisPositionFromProspectiveStep()"
       [highestStep]="getHighestStep()"