Angular 21 - Turned on strictTemplates flag

patches/@bazel+concatjs+5.8.1.patch

@@ -81,6 +81,40 @@ 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/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));
+     }
 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

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: Array<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

@@ -74,9 +74,9 @@ export class ScalarCardFobController {
   };
   prospectiveStep: number | null = null;
 
-  getAxisPositionFromStartStep() {
+  getAxisPositionFromStartStep(): number {
     if (!this.timeSelection) {
-      return '';
+      return 0;
     }
     return this.scale.forward(
       this.minMaxHorizontalViewExtend,

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

@@ -27,7 +27,6 @@
   [useDarkMode]="useDarkMode"
   [userViewBox]="userViewBox"
   [disableTooltip]="disableTooltip"
-  (onViewBoxOverridden)="isViewBoxOverridden = $event"
   (viewBoxChanged)="onLineChartZoom.emit($event)"
   [customVisTemplate]="lineChartCustomVis"
   [customChartOverlayTemplate]="lineChartCustomXAxisVis"
@@ -64,7 +63,7 @@
         xScale.forward(
           viewExtent.x,
           [0, domDim.width],
-          stepOrLinkedTimeSelection.end?.step
+          stepOrLinkedTimeSelection.end!.step
         ) + 'px'
       "
     ></div>

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

@@ -90,8 +90,6 @@ export class ScalarCardLineChartComponent {
 
   constructor(private readonly changeDetector: ChangeDetectorRef) {}
 
-  isViewBoxOverridden: boolean = false;
-
   resetDomain() {
     if (this.lineChart) {
       this.lineChart.viewBoxReset();

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

@@ -110,7 +110,7 @@ export class ScalarCardLineChartContainer
       ? of(this.xAxisType)
       : this.store.select(getMetricsXAxisType);
     this.xScaleType$ = this.xAxisType
-      ? ScaleType.LINEAR
+      ? of(ScaleType.LINEAR)
       : this.store.select(getMetricsXAxisType).pipe(
           map((xAxisType) => {
             switch (xAxisType) {

tensorboard/webapp/metrics/views/main_view/card_grid_component.ng.html

@@ -57,7 +57,7 @@
         i18n-aria-label="A button that sets a group to the previous page."
         aria-label="Previous page"
         [disabled]="pageIndex === 0"
-        (click)="handlePageChange(pageIndex - 1, $event.target)"
+        (click)="handlePageChange(pageIndex - 1, $any($event.target))"
       >
         Previous
       </button>
@@ -84,7 +84,7 @@
           aria-label="Next page"
           class="next pagination-button"
           [disabled]="pageIndex + 1 >= numPages"
-          (click)="handlePageChange(pageIndex + 1, $event.target)"
+          (click)="handlePageChange(pageIndex + 1, $any($event.target))"
         >
           Next
         </button>

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

@@ -53,6 +53,7 @@ export class CardGridComponent {
   @Input() cardObserver!: CardObserver;
   @Input() showPaginationControls!: boolean;
   @Input() cardStateMap!: CardStateMap;
+  @Input() groupName: string | null = null;
 
   @Output() pageIndexChanged = new EventEmitter<number>();
 

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

@@ -46,6 +46,7 @@ import {CardIdWithMetadata} from '../metrics_view_types';
       [cardMinWidth]="cardMinWidth$ | async"
       [cardObserver]="cardObserver"
       [cardStateMap]="cardStateMap$ | async"
+      [groupName]="groupName"
       (pageIndexChanged)="onPageIndexChanged($event)"
     >
     </metrics-card-grid-component>

tensorboard/webapp/metrics/views/main_view/filter_input_component.ng.html

@@ -18,7 +18,7 @@
   <tb-filter-input
     placeholder="Filter tags (regex)"
     [value]="regexFilterValue"
-    (input)="onRegexFilterValueChange.emit($event.target.value)"
+    (input)="onRegexFilterValueChange.emit($any($event.target).value)"
     [matAutocomplete]="filterMatches"
   ></tb-filter-input>
   <mat-icon
@@ -34,13 +34,13 @@
   class="tag-options"
 >
   <mat-option
-    *ngFor="let completion of completions?.slice(0, 25)"
+    *ngFor="let completion of completions.slice(0, 25)"
     [value]="completion"
     class="option"
     [attr.title]="completion"
     >{{ completion }}</mat-option
   >
-  <div *ngIf="completions?.length > 25" class="and-more">
+  <div *ngIf="completions.length > 25" class="and-more">
     <em>and {{completions.length - 25 | number}} more tags matched</em>
   </div>
 </mat-autocomplete>

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

@@ -15,7 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
-import {combineLatestWith, filter, map} from 'rxjs/operators';
+import {combineLatestWith, filter, map, startWith} from 'rxjs/operators';
 import {State} from '../../../app_state';
 import {
   getMetricsTagFilter,
@@ -79,7 +79,8 @@ export class MetricsFilterInputContainer {
       filter(([, tagFilterRegex]) => tagFilterRegex !== null),
       map(([tags, tagFilterRegex]) => {
         return tags.filter((tag: string) => tagFilterRegex!.test(tag));
-      })
+      }),
+      startWith([] as string[])
     );
   }
 

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

@@ -15,7 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
-import {skip, startWith} from 'rxjs/operators';
+import {map, skip, startWith} from 'rxjs/operators';
 import {State} from '../../../app_state';
 import {getEnableGlobalPins} from '../../../selectors';
 import {DeepReadonly} from '../../../util/types';
@@ -44,7 +44,10 @@ export class PinnedViewContainer {
   constructor(private readonly store: Store<State>) {
     this.cardIdsWithMetadata$ = this.store
       .select(getPinnedCardsWithMetadata)
-      .pipe(startWith([]));
+      .pipe(
+        map((cards) => cards as DeepReadonly<CardIdWithMetadata>[]),
+        startWith([] as DeepReadonly<CardIdWithMetadata>[])
+      );
     this.lastPinnedCardTime$ = this.store.select(getLastPinnedCardTime).pipe(
       // Ignore the first value on component load, only reacting to new
       // pins after page load.
@@ -53,7 +56,7 @@ export class PinnedViewContainer {
     this.globalPinsEnabled$ = this.store.select(getEnableGlobalPins);
   }
 
-  readonly cardIdsWithMetadata$: Observable<DeepReadonly<CardIdWithMetadata[]>>;
+  readonly cardIdsWithMetadata$: Observable<DeepReadonly<CardIdWithMetadata>[]>;
 
   readonly lastPinnedCardTime$;