Explicitly set standalone for all Angular components (#6912)

Angular v19 is going to change the default value for `standalone` from
`false` to `true`. Even though tensorboard is on an older version of
Angular on GitHub, the version inside Google runs at HEAD. We're in the
process of changing existing code in google to explicitly set
`standalone: false` for existing code, so I'm sending this change to the
source of truth here.

Author: jelbourn

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ts

@@ -16,6 +16,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {DebuggerRunListing} from './store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'debugger-component',
   templateUrl: './debugger_component.ng.html',
   styleUrls: ['./debugger_component.css'],

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts

@@ -19,6 +19,7 @@ import {getActiveRunId, getDebuggerRunListing} from './store';
 import {State} from './store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2',
   template: `
     <debugger-component

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing/index.ts

@@ -354,6 +354,7 @@ export function createState(
 // that use it.
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2',
   template: ``,
 })

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

@@ -23,6 +23,7 @@ export interface AlertTypeDisplay {
 }
 
 @Component({
+  standalone: false,
   selector: 'alerts-component',
   templateUrl: './alerts_component.ng.html',
   styleUrls: ['./alerts_component.css'],

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

@@ -45,6 +45,7 @@ const ALERT_TYPE_TO_DISPLAY_NAME_AND_SYMBOL: {
 };
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-alerts',
   template: `
     <alerts-component

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

@@ -30,6 +30,7 @@ const basicDebugInfoStyle = `
 `;
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-dtype',
   template: ` {{ dtype }} `,
   styles: [basicDebugInfoStyle],
@@ -40,6 +41,7 @@ export class DebugTensorDTypeComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-rank',
   template: ` {{ rank }}D `,
   styles: [basicDebugInfoStyle],
@@ -50,6 +52,7 @@ export class DebugTensorRankComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-shape',
   template: ` shape:{{ shapeString }} `,
   styles: [basicDebugInfoStyle],
@@ -72,6 +75,7 @@ export class DebugTensorShapeComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-numeric-breakdown',
   template: `
     <div class="size">
@@ -205,6 +209,7 @@ export class DebugTensorNumericBreakdownComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-has-inf-or-nan',
   template: `
     <div [ngClass]="['container', hasInfOrNaN ? 'has-inf-or-nan' : '']">
@@ -242,6 +247,7 @@ export class DebugTensorHasInfOrNaNComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'debug-tensor-value',
   template: `
     <debug-tensor-dtype

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

@@ -17,6 +17,7 @@ import {Execution, TensorDebugMode} from '../../store/debugger_types';
 import {parseDebugTensorValue} from '../../store/debug_tensor_value';
 
 @Component({
+  standalone: false,
   selector: 'execution-data-component',
   templateUrl: './execution_data_component.ng.html',
   styleUrls: ['./execution_data_component.css'],

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

@@ -21,6 +21,7 @@ import {DTYPE_ENUM_TO_NAME} from '../../tf_dtypes';
 const UNKNOWN_DTYPE_NAME = 'Unknown dtype';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-execution-data',
   template: `
     <execution-data-component

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

@@ -27,6 +27,7 @@ import {
 } from '../../store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'graph-component',
   templateUrl: './graph_component.ng.html',
   styleUrls: ['./graph_component.css'],

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

@@ -23,6 +23,7 @@ import {
 import {State} from '../../store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-graph',
   template: `
     <graph-component

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

@@ -17,6 +17,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GraphOpInfo} from '../../store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'graph-op',
   templateUrl: 'graph_op_component.ng.html',
   styleUrls: ['./graph_op_component.css'],

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

@@ -28,6 +28,7 @@ import {GraphExecution} from '../../store/debugger_types';
 import {parseDebugTensorValue} from '../../store/debug_tensor_value';
 
 @Component({
+  standalone: false,
   selector: 'graph-executions-component',
   templateUrl: './graph_executions_component.ng.html',
   styleUrls: ['./graph_executions_component.css'],

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

@@ -27,6 +27,7 @@ import {
 import {State} from '../../store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-graph-executions',
   template: `
     <graph-executions-component

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_component.ts

@@ -15,6 +15,7 @@ limitations under the License.
 import {Component} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'inactive-component',
   templateUrl: './inactive_component.ng.html',
   styleUrls: ['./inactive_component.css'],

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_container.ts

@@ -19,6 +19,7 @@ import {Store} from '@ngrx/store';
 export interface InactiveState {}
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-inactive',
   template: ` <inactive-component></inactive-component> `,
 })

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

@@ -24,6 +24,7 @@ import {SourceFileContent, StackFrame} from '../../store/debugger_types';
  * displayed by this component.
  */
 @Component({
+  standalone: false,
   selector: 'source-files-component',
   templateUrl: './source_files_component.ng.html',
   styleUrls: ['./source_files_component.css'],

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

@@ -24,6 +24,7 @@ import {
 import {State as DebuggerState} from '../../store/debugger_types';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-source-files',
   template: `
     <source-files-component

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

@@ -40,6 +40,7 @@ export interface StackFrameForDisplay {
 }
 
 @Component({
+  standalone: false,
   selector: 'stack-trace-component',
   templateUrl: './stack_trace_component.ng.html',
   styleUrls: ['./stack_trace_component.css'],

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

@@ -25,6 +25,7 @@ import {CodeLocationType, State} from '../../store/debugger_types';
 import {StackFrameForDisplay} from './stack_trace_component';
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-stack-trace',
   template: `
     <stack-trace-component

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

@@ -31,6 +31,7 @@ export interface ExecutionDigestForDisplay {
 }
 
 @Component({
+  standalone: false,
   selector: 'timeline-component',
   templateUrl: './timeline_component.ng.html',
   styleUrls: ['./timeline_component.css'],

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

@@ -85,6 +85,7 @@ function getExecutionDigestForDisplay(
 }
 
 @Component({
+  standalone: false,
   selector: 'tf-debugger-v2-timeline',
   template: `
     <timeline-component

tensorboard/webapp/alert/views/alert_display_snackbar_container.ts

@@ -20,6 +20,7 @@ import {splitByURL} from '../../util/string';
 import {AlertInfo} from '../types';
 
 @Component({
+  standalone: false,
   selector: 'alert-display-snackbar',
   templateUrl: './alert_display_snackbar_container.ng.html',
   styleUrls: ['./alert_display_snackbar_container.css'],

tensorboard/webapp/alert/views/alert_snackbar_container.ts

@@ -31,6 +31,7 @@ import {AlertDisplaySnackbarContainer} from './alert_display_snackbar_container'
  * Renders alerts in a 'snackbar' to indicate them to the user.
  */
 @Component({
+  standalone: false,
   selector: 'alert-snackbar',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,

tensorboard/webapp/app_container.ts

@@ -15,6 +15,7 @@ limitations under the License.
 import {Component, ViewContainerRef} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'tb-webapp',
   templateUrl: './app_container.ng.html',
   styleUrls: ['./app_container.css'],

tensorboard/webapp/app_routing/route_registry_module_test.ts

@@ -19,18 +19,21 @@ import {RouteRegistryModule} from './route_registry_module';
 import {RouteKind} from './types';
 
 @Component({
+  standalone: false,
   selector: 'experiment',
   template: 'I am experiment',
 })
 class Experiment {}
 
 @Component({
+  standalone: false,
   selector: 'experiments',
   template: 'List of experiment',
 })
 class Experiments {}
 
 @Component({
+  standalone: false,
   selector: 'not_found',
   template: 'Unknown route',
 })

tensorboard/webapp/app_routing/views/router_link_test.ts

@@ -27,6 +27,7 @@ import {LocationModule} from '../location_module';
 import {RouterLinkDirectiveContainer} from './router_link_directive_container';
 
 @Component({
+  standalone: false,
   selector: 'test',
   template: '<a [routerLink]="link">testable link</a>',
 })
@@ -36,6 +37,7 @@ class TestableComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-with-reset',
   template:
     '<a [routerLink]="link" [resetNamespacedState]="resetNamespacedState">testable link</a>',

tensorboard/webapp/app_routing/views/router_outlet_component.ts

@@ -24,6 +24,7 @@ import {
 } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'router-outlet-component',
   template: ` <ng-container #routeContainer></ng-container> `,
   changeDetection: ChangeDetectionStrategy.OnPush,

tensorboard/webapp/app_routing/views/router_outlet_container.ts

@@ -25,6 +25,7 @@ import {
 } from '../store/app_routing_selectors';
 
 @Component({
+  standalone: false,
   selector: 'router-outlet',
   template: `
     <router-outlet-component

tensorboard/webapp/app_routing/views/router_outlet_test.ts

@@ -33,12 +33,14 @@ import {RouterOutletComponent} from './router_outlet_component';
 import {RouterOutletContainer} from './router_outlet_container';
 
 @Component({
+  standalone: false,
   selector: 'first',
   template: 'I am a test',
 })
 class FirstTestableComponent {}
 
 @Component({
+  standalone: false,
   selector: 'second',
   template: 'I am inevitable',
 })

tensorboard/webapp/core/views/dark_mode_supporter_container.ts

@@ -18,6 +18,7 @@ import {State} from '../../app_state';
 import {getDarkModeEnabled} from '../../selectors';
 
 @Component({
+  standalone: false,
   selector: 'dark-mode-supporter',
   template: ``,
   styles: [

tensorboard/webapp/core/views/hash_storage_component.ts

@@ -32,6 +32,7 @@ export enum ChangedProp {
 }
 
 @Component({
+  standalone: false,
   selector: 'hash-storage-component',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,

tensorboard/webapp/core/views/hash_storage_container.ts

@@ -20,6 +20,7 @@ import {getActivePlugin} from '../store';
 import {ChangedProp} from './hash_storage_component';
 
 @Component({
+  standalone: false,
   selector: 'hash-storage',
   template: `
     <hash-storage-component

tensorboard/webapp/core/views/layout_container.ts

@@ -30,6 +30,7 @@ import {
 } from '../store/core_selectors';
 
 @Component({
+  standalone: false,
   selector: 'tb-dashboard-layout',
   template: `
     <button

tensorboard/webapp/core/views/layout_test.ts

@@ -30,18 +30,21 @@ import {
 import {LayoutContainer} from './layout_container';
 
 @Component({
+  standalone: false,
   selector: 'sidebar',
   template: `sidebar content`,
 })
 class Sidebar {}
 
 @Component({
+  standalone: false,
   selector: 'main',
   template: `main content`,
 })
 class Main {}
 
 @Component({
+  standalone: false,
   selector: 'testable-component',
   template: `
     <tb-dashboard-layout>

tensorboard/webapp/core/views/page_title_component.ts

@@ -29,6 +29,7 @@ const utils = {
 };
 
 @Component({
+  standalone: false,
   selector: 'page-title-component',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,

tensorboard/webapp/core/views/page_title_container.ts

@@ -43,6 +43,7 @@ const DEFAULT_BRAND_NAME = 'TensorBoard';
  * Renders page title.
  */
 @Component({
+  standalone: false,
   selector: 'page-title',
   template: `
     <page-title-component [title]="title$ | async"></page-title-component>

tensorboard/webapp/core/views/page_title_test.ts

@@ -112,6 +112,7 @@ describe('page title test', () => {
 });
 
 @Component({
+  standalone: false,
   selector: 'my-tester',
   template: ` <page-title></page-title> `,
 })

tensorboard/webapp/customization/customizable_component.ts

@@ -58,6 +58,7 @@ import {
  *
  *    @Injectable()
  *    @Component({
+ *      standalone: false,
  *      selector: 'my-custom-button-component',
  *      template: '<button mat-button>I am a special button!</button>'
  *    })
@@ -74,6 +75,7 @@ import {
  *    })
  */
 @Component({
+  standalone: false,
   selector: 'tb-customization',
   template: `
     <ng-container *ngIf="!customizableComponent">