1st commit Angular 22 to review CI checks. Tested locally.

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,28 @@ 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.
+#
+# The generated @npm//@bazel/concatjs/bin:tsc_wrapped binary, which ts_library
+# uses by default, only carries @bazel/concatjs's own declared dependencies and
+# peer dependencies in its runfiles. `typescript` is in neither list, so
+# tsc_wrapped.js cannot `require('typescript')` once the sandbox removes the
+# execroot node_modules fallback. Clone the binary here with typescript added.
+#
+# Angular targets do not hit this because tsc_wrapped_with_angular below pulls
+# in @angular/compiler-cli and @bazel/typescript, which both declare typescript
+# as a peer dependency. This target keeps that from being load-bearing.
+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 +79,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"])
 
+    # The default ts_library compiler cannot resolve `typescript` under a sandbox.
+    # See the //tensorboard/defs:tsc_wrapped comment. tf_ng_module passes its own
+    # compiler, so setdefault leaves Angular targets alone.
+    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/debugger_container.ts

@@ -29,8 +29,8 @@ import {State} from './store/debugger_types';
   selector: 'tf-debugger-v2',
   template: `
     <debugger-component
-      [runs]="runs$ | async"
-      [runIds]="runsIds$ | async"
+      [runs]="(runs$ | async)!"
+      [runIds]="(runsIds$ | async)!"
       [activeRunId]="activeRunId$ | async"
     ></debugger-component>
   `,

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container.ts

@@ -49,8 +49,8 @@ const ALERT_TYPE_TO_DISPLAY_NAME_AND_SYMBOL: {
   selector: 'tf-debugger-v2-alerts',
   template: `
     <alerts-component
-      [numAlerts]="numAlerts$ | async"
-      [alertsBreakdown]="alertsBreakdown$ | async"
+      [numAlerts]="(numAlerts$ | async)!"
+      [alertsBreakdown]="(alertsBreakdown$ | async)!"
       [focusType]="focusType$ | async"
       (onToggleFocusType)="onToggleFocusType($event)"
     >

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/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts

@@ -27,9 +27,9 @@ const UNKNOWN_DTYPE_NAME = 'Unknown dtype';
   template: `
     <execution-data-component
       [focusedExecutionIndex]="focusedExecutionIndex"
-      [focusedExecutionData]="focusedExecutionData$ | async"
-      [tensorDebugMode]="tensorDebugMode$ | async"
-      [hasDebugTensorValues]="hasDebugTensorValues$ | async"
+      [focusedExecutionData]="(focusedExecutionData$ | async)!"
+      [tensorDebugMode]="(tensorDebugMode$ | async)!"
+      [hasDebugTensorValues]="(hasDebugTensorValues$ | async)!"
       [debugTensorValues]="debugTensorValues$ | async"
       [debugTensorDtypes]="debugTensorDtypes$ | async"
     ></execution-data-component>

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container.ts

@@ -28,9 +28,9 @@ import {State} from '../../store/debugger_types';
   selector: 'tf-debugger-v2-graph',
   template: `
     <graph-component
-      [opInfo]="opInfo$ | async"
-      [inputOps]="inputOps$ | async"
-      [consumerOps]="consumerOps$ | async"
+      [opInfo]="(opInfo$ | async)!"
+      [inputOps]="(inputOps$ | async)!"
+      [consumerOps]="(consumerOps$ | async)!"
       (onGraphOpNavigate)="onGraphOpNavigate($event)"
     ></graph-component>
   `,

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_container.ts

@@ -32,9 +32,9 @@ import {State} from '../../store/debugger_types';
   selector: 'tf-debugger-v2-graph-executions',
   template: `
     <graph-executions-component
-      [numGraphExecutions]="numGraphExecutions$ | async"
-      [graphExecutionData]="graphExecutionData$ | async"
-      [graphExecutionIndices]="graphExecutionIndices$ | async"
+      [numGraphExecutions]="(numGraphExecutions$ | async)!"
+      [graphExecutionData]="(graphExecutionData$ | async)!"
+      [graphExecutionIndices]="(graphExecutionIndices$ | async)!"
       [focusIndex]="focusIndex$ | async"
       [focusInputIndices]="focusInputIndices$ | async"
       (onScrolledIndexChange)="onScrolledIndexChange($event)"

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container.ts

@@ -31,7 +31,7 @@ import {State as DebuggerState} from '../../store/debugger_types';
     <source-files-component
       [focusedSourceFileContent]="focusedSourceFileContent$ | async"
       [focusedSourceLineSpec]="focusedSourceLineSpec$ | async"
-      [useDarkMode]="useDarkMode$ | async"
+      [useDarkMode]="(useDarkMode$ | async)!"
     ></source-files-component>
   `,
 })

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container.ts

@@ -35,7 +35,7 @@ import {StackFrameForDisplay} from './stack_trace_component';
       [opName]="opName$ | async"
       [executionIndex]="executionIndex$ | async"
       [stickToBottommostFrameInFocusedFile]="
-        stickToBottommostFrameInFocusedFile$ | async
+        (stickToBottommostFrameInFocusedFile$ | async)!
       "
       [stackFramesForDisplay]="stackFramesForDisplay$ | async"
       (onSourceLineClicked)="onSourceLineClicked($event)"

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container.ts

@@ -90,14 +90,14 @@ function getExecutionDigestForDisplay(
   template: `
     <timeline-component
       [activeRunId]="activeRunId$ | async"
-      [loadingNumExecutions]="loadingNumExecutions$ | async"
-      [numExecutions]="numExecutions$ | async"
-      [scrollBeginIndex]="scrollBeginIndex$ | async"
-      [scrollBeginIndexUpperLimit]="scrollBeginIndexUpperLimit$ | async"
-      [pageSize]="pageSize$ | async"
-      [displayCount]="displayCount$ | async"
-      [displayExecutionDigests]="displayExecutionDigests$ | async"
-      [displayFocusedAlertTypes]="displayFocusedAlertTypes$ | async"
+      [loadingNumExecutions]="(loadingNumExecutions$ | async)!"
+      [numExecutions]="(numExecutions$ | async)!"
+      [scrollBeginIndex]="(scrollBeginIndex$ | async)!"
+      [scrollBeginIndexUpperLimit]="(scrollBeginIndexUpperLimit$ | async)!"
+      [pageSize]="(pageSize$ | async)!"
+      [displayCount]="(displayCount$ | async)!"
+      [displayExecutionDigests]="(displayExecutionDigests$ | async)!"
+      [displayFocusedAlertTypes]="(displayFocusedAlertTypes$ | async)!"
       [focusedExecutionIndex]="focusedExecutionIndex$ | async"
       [focusedExecutionDisplayIndex]="focusedExecutionDisplayIndex$ | async"
       (onNavigateLeft)="onNavigateLeft()"

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/core/views/page_title_container.ts

@@ -46,7 +46,7 @@ const DEFAULT_BRAND_NAME = 'TensorBoard';
   standalone: false,
   selector: 'page-title',
   template: `
-    <page-title-component [title]="title$ | async"></page-title-component>
+    <page-title-component [title]="(title$ | async)!"></page-title-component>
   `,
   styles: [
     `

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,13 @@ export class CustomizableComponentType {}
 })
 export class ParentComponent {
   constructor(
-    @Optional() readonly customizableComponent: CustomizableComponentType
+    // CustomizableComponentType is only an injection token here. What gets
+    // provided for it is a component class, via useValue, so the injected
+    // value is a Type rather than an instance of the marker class. The
+    // explicit @Inject is required once the annotation stops naming the token.
+    @Inject(CustomizableComponentType)
+    @Optional()
+    readonly customizableComponent: Type<unknown>
   ) {}
 }