From 40dfeffecc14a0f627cd495b911221566a4215b5 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Mon, 23 Sep 2024 13:33:35 -0700
Subject: [PATCH] Explicitly set `standalone` for all Angular components

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.
---
 .../debugger_v2/tf_debugger_v2_plugin/debugger_component.ts | 1 +
 .../debugger_v2/tf_debugger_v2_plugin/debugger_container.ts | 1 +
 .../debugger_v2/tf_debugger_v2_plugin/testing/index.ts      | 1 +
 .../tf_debugger_v2_plugin/views/alerts/alerts_component.ts  | 1 +
 .../tf_debugger_v2_plugin/views/alerts/alerts_container.ts  | 1 +
 .../debug_tensor_value/debug_tensor_value_component.ts      | 6 ++++++
 .../views/execution_data/execution_data_component.ts        | 1 +
 .../views/execution_data/execution_data_container.ts        | 1 +
 .../tf_debugger_v2_plugin/views/graph/graph_component.ts    | 1 +
 .../tf_debugger_v2_plugin/views/graph/graph_container.ts    | 1 +
 .../tf_debugger_v2_plugin/views/graph/graph_op_component.ts | 1 +
 .../views/graph_executions/graph_executions_component.ts    | 1 +
 .../views/graph_executions/graph_executions_container.ts    | 1 +
 .../views/inactive/inactive_component.ts                    | 1 +
 .../views/inactive/inactive_container.ts                    | 1 +
 .../views/source_files/source_files_component.ts            | 1 +
 .../views/source_files/source_files_container.ts            | 1 +
 .../views/stack_trace/stack_trace_component.ts              | 1 +
 .../views/stack_trace/stack_trace_container.ts              | 1 +
 .../views/timeline/timeline_component.ts                    | 1 +
 .../views/timeline/timeline_container.ts                    | 1 +
 .../webapp/alert/views/alert_display_snackbar_container.ts  | 1 +
 tensorboard/webapp/alert/views/alert_snackbar_container.ts  | 1 +
 tensorboard/webapp/app_container.ts                         | 1 +
 .../webapp/app_routing/route_registry_module_test.ts        | 3 +++
 tensorboard/webapp/app_routing/views/router_link_test.ts    | 2 ++
 .../webapp/app_routing/views/router_outlet_component.ts     | 1 +
 .../webapp/app_routing/views/router_outlet_container.ts     | 1 +
 tensorboard/webapp/app_routing/views/router_outlet_test.ts  | 2 ++
 .../webapp/core/views/dark_mode_supporter_container.ts      | 1 +
 tensorboard/webapp/core/views/hash_storage_component.ts     | 1 +
 tensorboard/webapp/core/views/hash_storage_container.ts     | 1 +
 tensorboard/webapp/core/views/layout_container.ts           | 1 +
 tensorboard/webapp/core/views/layout_test.ts                | 3 +++
 tensorboard/webapp/core/views/page_title_component.ts       | 1 +
 tensorboard/webapp/core/views/page_title_container.ts       | 1 +
 tensorboard/webapp/core/views/page_title_test.ts            | 1 +
 tensorboard/webapp/customization/customizable_component.ts  | 2 ++
 tensorboard/webapp/customization/customization_test.ts      | 2 ++
 .../feature_flag/directives/feature_flag_directive_test.ts  | 2 ++
 .../feature_flag/views/feature_flag_dialog_component.ts     | 1 +
 .../feature_flag/views/feature_flag_dialog_container.ts     | 1 +
 .../views/feature_flag_modal_trigger_container.ts           | 1 +
 .../views/feature_flag_modal_trigger_container_test.ts      | 1 +
 tensorboard/webapp/header/dark_mode_toggle_component.ts     | 1 +
 tensorboard/webapp/header/dark_mode_toggle_container.ts     | 1 +
 tensorboard/webapp/header/header_component.ts               | 1 +
 tensorboard/webapp/header/plugin_selector_component.ts      | 1 +
 tensorboard/webapp/header/plugin_selector_container.ts      | 1 +
 tensorboard/webapp/header/reload_container.ts               | 1 +
 .../webapp/metrics/views/card_renderer/card_lazy_loader.ts  | 1 +
 .../metrics/views/card_renderer/card_lazy_loader_test.ts    | 2 ++
 .../metrics/views/card_renderer/card_view_component.ts      | 1 +
 .../metrics/views/card_renderer/card_view_container.ts      | 1 +
 .../webapp/metrics/views/card_renderer/card_view_test.ts    | 1 +
 .../views/card_renderer/data_download_dialog_component.ts   | 1 +
 .../views/card_renderer/data_download_dialog_container.ts   | 1 +
 .../metrics/views/card_renderer/histogram_card_component.ts | 1 +
 .../metrics/views/card_renderer/histogram_card_container.ts | 1 +
 .../metrics/views/card_renderer/histogram_card_test.ts      | 1 +
 .../metrics/views/card_renderer/image_card_component.ts     | 1 +
 .../metrics/views/card_renderer/image_card_container.ts     | 1 +
 .../webapp/metrics/views/card_renderer/image_card_test.ts   | 1 +
 .../metrics/views/card_renderer/run_name_component.ts       | 1 +
 .../metrics/views/card_renderer/run_name_container.ts       | 1 +
 .../metrics/views/card_renderer/scalar_card_component.ts    | 1 +
 .../metrics/views/card_renderer/scalar_card_container.ts    | 1 +
 .../metrics/views/card_renderer/scalar_card_data_table.ts   | 1 +
 .../views/card_renderer/scalar_card_fob_controller.ts       | 1 +
 .../views/card_renderer/scalar_card_line_chart_component.ts | 1 +
 .../views/card_renderer/scalar_card_line_chart_container.ts | 1 +
 .../views/card_renderer/scalar_card_line_chart_test.ts      | 2 ++
 .../webapp/metrics/views/card_renderer/scalar_card_test.ts  | 2 ++
 .../vis_linked_time_selection_warning_component.ts          | 1 +
 .../webapp/metrics/views/main_view/card_grid_component.ts   | 1 +
 .../webapp/metrics/views/main_view/card_grid_container.ts   | 1 +
 .../webapp/metrics/views/main_view/card_grid_test.ts        | 1 +
 .../metrics/views/main_view/card_group_toolbar_component.ts | 1 +
 .../metrics/views/main_view/card_group_toolbar_container.ts | 1 +
 .../webapp/metrics/views/main_view/card_groups_component.ts | 1 +
 .../webapp/metrics/views/main_view/card_groups_container.ts | 1 +
 .../views/main_view/empty_tag_match_message_component.ts    | 1 +
 .../views/main_view/empty_tag_match_message_container.ts    | 1 +
 .../metrics/views/main_view/filter_input_component.ts       | 1 +
 .../metrics/views/main_view/filter_input_container.ts       | 1 +
 .../metrics/views/main_view/filtered_view_component.ts      | 1 +
 .../metrics/views/main_view/filtered_view_container.ts      | 1 +
 .../webapp/metrics/views/main_view/main_view_component.ts   | 1 +
 .../webapp/metrics/views/main_view/main_view_container.ts   | 1 +
 .../webapp/metrics/views/main_view/main_view_test.ts        | 2 ++
 .../webapp/metrics/views/main_view/pinned_view_component.ts | 1 +
 .../webapp/metrics/views/main_view/pinned_view_container.ts | 1 +
 tensorboard/webapp/metrics/views/metrics_container.ts       | 1 +
 .../webapp/metrics/views/right_pane/right_pane_component.ts | 1 +
 .../views/right_pane/saving_pins_checkbox_component.ts      | 1 +
 .../saving_pins_dialog/saving_pins_dialog_component.ts      | 1 +
 .../scalar_column_editor/scalar_column_editor_component.ts  | 1 +
 .../scalar_column_editor/scalar_column_editor_container.ts  | 1 +
 .../metrics/views/right_pane/settings_view_component.ts     | 1 +
 .../metrics/views/right_pane/settings_view_container.ts     | 1 +
 .../_views/notification_center_component.ts                 | 1 +
 .../_views/notification_center_container.ts                 | 1 +
 tensorboard/webapp/plugins/plugins_component.ts             | 1 +
 tensorboard/webapp/plugins/plugins_container.ts             | 1 +
 tensorboard/webapp/plugins/plugins_container_test.ts        | 1 +
 tensorboard/webapp/plugins/testing/index.ts                 | 1 +
 tensorboard/webapp/reloader/reloader_component.ts           | 1 +
 .../runs/views/runs_selector/runs_selector_component.ts     | 1 +
 .../runs/views/runs_selector/runs_selector_container.ts     | 1 +
 .../webapp/runs/views/runs_table/filterbar_component.ts     | 1 +
 .../webapp/runs/views/runs_table/filterbar_container.ts     | 1 +
 tensorboard/webapp/runs/views/runs_table/filterbar_test.ts  | 1 +
 .../runs/views/runs_table/regex_edit_dialog_component.ts    | 1 +
 .../runs/views/runs_table/regex_edit_dialog_container.ts    | 1 +
 tensorboard/webapp/runs/views/runs_table/runs_data_table.ts | 1 +
 .../webapp/runs/views/runs_table/runs_data_table_test.ts    | 1 +
 .../views/runs_table/runs_group_menu_button_component.ts    | 1 +
 .../views/runs_table/runs_group_menu_button_container.ts    | 1 +
 .../webapp/runs/views/runs_table/runs_table_container.ts    | 1 +
 .../legacy_runs_selector/legacy_runs_selector_component.ts  | 1 +
 .../legacy_runs_selector/legacy_runs_selector_container.ts  | 1 +
 .../webapp/settings/_views/polymer_interop_container.ts     | 1 +
 .../webapp/settings/_views/settings_button_component.ts     | 1 +
 .../webapp/settings/_views/settings_button_container.ts     | 1 +
 .../webapp/settings/_views/settings_dialog_component.ts     | 1 +
 .../webapp/settings/_views/settings_dialog_container.ts     | 1 +
 tensorboard/webapp/tb_wrapper/tb_wrapper_component.ts       | 1 +
 tensorboard/webapp/testing/integration_test_module.ts       | 1 +
 tensorboard/webapp/testing/mat_icon_module.ts               | 1 +
 tensorboard/webapp/widgets/card_fob/card_fob_component.ts   | 1 +
 .../widgets/card_fob/card_fob_controller_component.ts       | 1 +
 .../webapp/widgets/card_fob/card_fob_controller_test.ts     | 1 +
 tensorboard/webapp/widgets/card_fob/card_fob_test.ts        | 1 +
 .../content_wrapping_input_component.ts                     | 1 +
 .../content_wrapping_input/content_wrapping_input_test.ts   | 1 +
 .../webapp/widgets/custom_modal/custom_modal_test.ts        | 1 +
 .../webapp/widgets/data_table/column_selector_component.ts  | 1 +
 .../webapp/widgets/data_table/content_cell_component.ts     | 1 +
 .../widgets/data_table/content_cell_component_test.ts       | 1 +
 .../webapp/widgets/data_table/content_row_component.ts      | 1 +
 .../webapp/widgets/data_table/context_menu_component.ts     | 1 +
 .../webapp/widgets/data_table/data_table_component.ts       | 1 +
 .../widgets/data_table/data_table_header_component.ts       | 1 +
 tensorboard/webapp/widgets/data_table/data_table_test.ts    | 1 +
 .../webapp/widgets/data_table/filter_dialog_component.ts    | 1 +
 .../webapp/widgets/data_table/header_cell_component.ts      | 1 +
 .../webapp/widgets/data_table/header_cell_component_test.ts | 1 +
 tensorboard/webapp/widgets/dropdown/dropdown_component.ts   | 1 +
 tensorboard/webapp/widgets/dropdown/dropdown_test.ts        | 1 +
 .../widgets/experiment_alias/experiment_alias_component.ts  | 1 +
 .../widgets/experiment_alias/experiment_alias_test.ts       | 1 +
 .../webapp/widgets/filter_input/filter_input_component.ts   | 1 +
 .../webapp/widgets/filter_input/filter_input_test.ts        | 2 ++
 .../widgets/histogram/histogram_card_fob_controller.ts      | 1 +
 tensorboard/webapp/widgets/histogram/histogram_component.ts | 1 +
 tensorboard/webapp/widgets/histogram/histogram_test.ts      | 1 +
 .../intersection_observer/intersection_observer_test.ts     | 1 +
 .../webapp/widgets/line_chart_v2/line_chart_component.ts    | 1 +
 .../widgets/line_chart_v2/line_chart_component_test.ts      | 2 ++
 .../widgets/line_chart_v2/sub_view/line_chart_axis_view.ts  | 1 +
 .../line_chart_v2/sub_view/line_chart_axis_view_test.ts     | 1 +
 .../widgets/line_chart_v2/sub_view/line_chart_grid_view.ts  | 1 +
 .../line_chart_v2/sub_view/line_chart_grid_view_test.ts     | 1 +
 .../line_chart_v2/sub_view/line_chart_interactive_view.ts   | 1 +
 .../sub_view/line_chart_interactive_view_test.ts            | 1 +
 .../markdown_renderer/markdown_renderer_component.ts        | 1 +
 .../markdown_renderer/markdown_renderer_component_test.ts   | 1 +
 .../webapp/widgets/range_input/range_input_component.ts     | 1 +
 tensorboard/webapp/widgets/range_input/range_input_test.ts  | 1 +
 tensorboard/webapp/widgets/resize_detector_test.ts          | 1 +
 .../webapp/widgets/source_code/source_code_component.ts     | 1 +
 .../webapp/widgets/source_code/source_code_container.ts     | 1 +
 .../widgets/source_code/source_code_container_test.ts       | 1 +
 .../widgets/source_code/source_code_diff_component.ts       | 1 +
 .../widgets/source_code/source_code_diff_container.ts       | 1 +
 .../widgets/source_code/source_code_diff_container_test.ts  | 1 +
 tensorboard/webapp/widgets/text/truncated_path_component.ts | 1 +
 177 files changed, 197 insertions(+)

diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ts
index 8ccb00a3e7..22d59d7eea 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts
index ac03294a65..e2865d6534 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing/index.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing/index.ts
index a039ccb4f2..700a92c286 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing/index.ts
+++ b/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: ``,
 })
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_component.ts
index 12601ba0b0..a2054c410f 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container.ts
index 56a1ba43c3..3dd5759089 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts
index 1e8e50ceda..21455d1196 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts
index c116a0c843..5ac2f42409 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts
index ea605413d2..c53c8586ff 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.ts
index c59638bc15..4c979b8021 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container.ts
index 1bdbc328a7..82e929758e 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.ts
index 3f2024c53b..b7e5c0a9f1 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.ts
index 903b79792e..96f2c6f687 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_container.ts
index 288224bfbf..611e0200db 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_component.ts
index efca3a6cb3..a45c209ec5 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_container.ts
index a93607cb88..455190f0c6 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive/inactive_container.ts
+++ b/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> `,
 })
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.ts
index 05b00bf1f9..4dda714fc2 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container.ts
index f83160c2ce..dd9e2089d4 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.ts
index b10c51f88d..ca274d93bf 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container.ts
index 33cbe347b6..e35802566f 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_container.ts
+++ b/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
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_component.ts
index 2607307084..079d202650 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_component.ts
+++ b/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'],
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container.ts
index c203f623d4..464d8b35ea 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_container.ts
+++ b/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
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
index ee20963931..07022f1cff 100644
--- a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
+++ b/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'],
diff --git a/tensorboard/webapp/alert/views/alert_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_snackbar_container.ts
index ebd8273586..47c62c3ef0 100644
--- a/tensorboard/webapp/alert/views/alert_snackbar_container.ts
+++ b/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,
diff --git a/tensorboard/webapp/app_container.ts b/tensorboard/webapp/app_container.ts
index e063b97766..64f21f7446 100644
--- a/tensorboard/webapp/app_container.ts
+++ b/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'],
diff --git a/tensorboard/webapp/app_routing/route_registry_module_test.ts b/tensorboard/webapp/app_routing/route_registry_module_test.ts
index 206bf4233c..5229882f57 100644
--- a/tensorboard/webapp/app_routing/route_registry_module_test.ts
+++ b/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',
 })
diff --git a/tensorboard/webapp/app_routing/views/router_link_test.ts b/tensorboard/webapp/app_routing/views/router_link_test.ts
index 8fcd07a688..1e01818dd1 100644
--- a/tensorboard/webapp/app_routing/views/router_link_test.ts
+++ b/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>',
diff --git a/tensorboard/webapp/app_routing/views/router_outlet_component.ts b/tensorboard/webapp/app_routing/views/router_outlet_component.ts
index 20d4409a09..db0becb2eb 100644
--- a/tensorboard/webapp/app_routing/views/router_outlet_component.ts
+++ b/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,
diff --git a/tensorboard/webapp/app_routing/views/router_outlet_container.ts b/tensorboard/webapp/app_routing/views/router_outlet_container.ts
index 554fe5c459..8466fa9b48 100644
--- a/tensorboard/webapp/app_routing/views/router_outlet_container.ts
+++ b/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
diff --git a/tensorboard/webapp/app_routing/views/router_outlet_test.ts b/tensorboard/webapp/app_routing/views/router_outlet_test.ts
index 84ee2d67f2..bb26173e72 100644
--- a/tensorboard/webapp/app_routing/views/router_outlet_test.ts
+++ b/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',
 })
diff --git a/tensorboard/webapp/core/views/dark_mode_supporter_container.ts b/tensorboard/webapp/core/views/dark_mode_supporter_container.ts
index 2f789b6a15..b271a69831 100644
--- a/tensorboard/webapp/core/views/dark_mode_supporter_container.ts
+++ b/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: [
diff --git a/tensorboard/webapp/core/views/hash_storage_component.ts b/tensorboard/webapp/core/views/hash_storage_component.ts
index 6339eae034..f0e9bf34f1 100644
--- a/tensorboard/webapp/core/views/hash_storage_component.ts
+++ b/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,
diff --git a/tensorboard/webapp/core/views/hash_storage_container.ts b/tensorboard/webapp/core/views/hash_storage_container.ts
index 4b1439928b..9c58707ef3 100644
--- a/tensorboard/webapp/core/views/hash_storage_container.ts
+++ b/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
diff --git a/tensorboard/webapp/core/views/layout_container.ts b/tensorboard/webapp/core/views/layout_container.ts
index f48e6303f8..1f2b8bbeac 100644
--- a/tensorboard/webapp/core/views/layout_container.ts
+++ b/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
diff --git a/tensorboard/webapp/core/views/layout_test.ts b/tensorboard/webapp/core/views/layout_test.ts
index 45b44121d6..5f2850a4d2 100644
--- a/tensorboard/webapp/core/views/layout_test.ts
+++ b/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>
diff --git a/tensorboard/webapp/core/views/page_title_component.ts b/tensorboard/webapp/core/views/page_title_component.ts
index 6b42871e2d..c2d06f5d8e 100644
--- a/tensorboard/webapp/core/views/page_title_component.ts
+++ b/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,
diff --git a/tensorboard/webapp/core/views/page_title_container.ts b/tensorboard/webapp/core/views/page_title_container.ts
index 8cf5927b0c..5d92f9de29 100644
--- a/tensorboard/webapp/core/views/page_title_container.ts
+++ b/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>
diff --git a/tensorboard/webapp/core/views/page_title_test.ts b/tensorboard/webapp/core/views/page_title_test.ts
index 3521996ac3..1d208e6a7c 100644
--- a/tensorboard/webapp/core/views/page_title_test.ts
+++ b/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> `,
 })
diff --git a/tensorboard/webapp/customization/customizable_component.ts b/tensorboard/webapp/customization/customizable_component.ts
index aa809d4341..bf8ef00229 100644
--- a/tensorboard/webapp/customization/customizable_component.ts
+++ b/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">
diff --git a/tensorboard/webapp/customization/customization_test.ts b/tensorboard/webapp/customization/customization_test.ts
index 73211b832f..c910ac123b 100644
--- a/tensorboard/webapp/customization/customization_test.ts
+++ b/tensorboard/webapp/customization/customization_test.ts
@@ -26,6 +26,7 @@ export class CustomizableComponentType {}
  * Parent class that uses the <tb-customization> component.
  */
 @Component({
+  standalone: false,
   selector: 'parent-component',
   template: `
     <tb-customization [customizableComponent]="customizableComponent">
@@ -54,6 +55,7 @@ export class ParentComponentModule {}
  * into the ParentComponent for some tests.
  */
 @Component({
+  standalone: false,
   selector: 'customizable-component',
   template: ` <div>Showing Customized Text!</div> `,
 })
diff --git a/tensorboard/webapp/feature_flag/directives/feature_flag_directive_test.ts b/tensorboard/webapp/feature_flag/directives/feature_flag_directive_test.ts
index 3fff2603f9..042762d1b1 100644
--- a/tensorboard/webapp/feature_flag/directives/feature_flag_directive_test.ts
+++ b/tensorboard/webapp/feature_flag/directives/feature_flag_directive_test.ts
@@ -26,6 +26,7 @@ import {State as FeatureFlagState} from '../store/feature_flag_types';
 import {FeatureFlagDirective} from './feature_flag_directive';
 
 @Component({
+  standalone: false,
   selector: 'test-matching-selector',
   template: `
     <p>
@@ -40,6 +41,7 @@ export class TestMatchingComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-nonmatching-selector',
   template: `
     <p>
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ts b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ts
index 7c67196e52..b749959e72 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ts
@@ -18,6 +18,7 @@ import {FeatureFlags} from '../types';
 import {FeatureFlagStatus, FeatureFlagStatusEvent} from './types';
 
 @Component({
+  standalone: false,
   selector: 'feature-flag-dialog-component',
   styleUrls: ['feature_flag_dialog_component.css'],
   templateUrl: `feature_flag_dialog_component.ng.html`,
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_container.ts b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_container.ts
index 38f2d8b3e7..2a90abfd76 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_container.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_container.ts
@@ -40,6 +40,7 @@ import {
 } from './types';
 
 @Component({
+  standalone: false,
   selector: 'feature-flag-dialog',
   template: `<feature-flag-dialog-component
     [featureFlagStatuses]="featureFlags$ | async"
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
index e7376ce406..34bc1dda35 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
@@ -30,6 +30,7 @@ const util = {
 };
 
 @Component({
+  standalone: false,
   selector: 'feature-flag-modal-trigger',
   template: ``,
   styles: [],
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
index 232a223a0e..88e5235cd3 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
@@ -35,6 +35,7 @@ import {
 } from './feature_flag_modal_trigger_container';
 
 @Component({
+  standalone: false,
   selector: 'testable-feature-flag-dialog-container',
   template: '<div>Test</div>',
   jit: true,
diff --git a/tensorboard/webapp/header/dark_mode_toggle_component.ts b/tensorboard/webapp/header/dark_mode_toggle_component.ts
index 8b43e372fe..40aae27cc2 100644
--- a/tensorboard/webapp/header/dark_mode_toggle_component.ts
+++ b/tensorboard/webapp/header/dark_mode_toggle_component.ts
@@ -21,6 +21,7 @@ export enum DarkModeOverride {
 }
 
 @Component({
+  standalone: false,
   selector: 'app-header-dark-mode-toggle-component',
   template: `
     <button
diff --git a/tensorboard/webapp/header/dark_mode_toggle_container.ts b/tensorboard/webapp/header/dark_mode_toggle_container.ts
index 15d77ffda4..1a01cbec62 100644
--- a/tensorboard/webapp/header/dark_mode_toggle_container.ts
+++ b/tensorboard/webapp/header/dark_mode_toggle_container.ts
@@ -23,6 +23,7 @@ import {State as FeatureFlagState} from '../feature_flag/store/feature_flag_type
 import {DarkModeOverride} from './dark_mode_toggle_component';
 
 @Component({
+  standalone: false,
   selector: 'app-header-dark-mode-toggle',
   template: `
     <app-header-dark-mode-toggle-component
diff --git a/tensorboard/webapp/header/header_component.ts b/tensorboard/webapp/header/header_component.ts
index ad30aff155..bbf8da9bbb 100644
--- a/tensorboard/webapp/header/header_component.ts
+++ b/tensorboard/webapp/header/header_component.ts
@@ -15,6 +15,7 @@ limitations under the License.
 import {Component} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'app-header',
   template: `
     <mat-toolbar>
diff --git a/tensorboard/webapp/header/plugin_selector_component.ts b/tensorboard/webapp/header/plugin_selector_component.ts
index c486424bac..b143a9609c 100644
--- a/tensorboard/webapp/header/plugin_selector_component.ts
+++ b/tensorboard/webapp/header/plugin_selector_component.ts
@@ -18,6 +18,7 @@ import {PluginId} from '../types/api';
 import {UiPluginMetadata} from './types';
 
 @Component({
+  standalone: false,
   selector: 'plugin-selector-component',
   templateUrl: './plugin_selector_component.ng.html',
   styleUrls: ['./plugin_selector_component.css'],
diff --git a/tensorboard/webapp/header/plugin_selector_container.ts b/tensorboard/webapp/header/plugin_selector_container.ts
index 16a6b79816..0c2eb8b60d 100644
--- a/tensorboard/webapp/header/plugin_selector_container.ts
+++ b/tensorboard/webapp/header/plugin_selector_container.ts
@@ -29,6 +29,7 @@ const getDisabledPlugins = createSelector(
 );
 
 @Component({
+  standalone: false,
   selector: 'plugin-selector',
   template: `
     <plugin-selector-component
diff --git a/tensorboard/webapp/header/reload_container.ts b/tensorboard/webapp/header/reload_container.ts
index 3199e937d1..742ac0e4c4 100644
--- a/tensorboard/webapp/header/reload_container.ts
+++ b/tensorboard/webapp/header/reload_container.ts
@@ -36,6 +36,7 @@ const isReloadDisabledByPlugin = createSelector(
 );
 
 @Component({
+  standalone: false,
   selector: 'app-header-reload',
   template: `
     <button
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader.ts b/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader.ts
index 387c385a49..73e5c0a61e 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader.ts
@@ -152,6 +152,7 @@ export class CardObserver {
  * ></div>
  */
 @Directive({
+  standalone: false,
   selector: '[cardLazyLoader]',
 })
 export class CardLazyLoader implements OnInit, OnDestroy {
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader_test.ts b/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader_test.ts
index d6fb866420..f1268d7b65 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader_test.ts
@@ -25,6 +25,7 @@ import {CardId} from '../../types';
 import {CardLazyLoader, CardObserver} from '../card_renderer/card_lazy_loader';
 
 @Component({
+  standalone: false,
   selector: 'card-view',
   template: `{{ cardId }}`,
 })
@@ -38,6 +39,7 @@ interface TestableCardConfig {
 }
 
 @Component({
+  standalone: false,
   selector: 'testable-cards',
   template: `
     <ng-container *ngFor="let config of configs">
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_view_component.ts b/tensorboard/webapp/metrics/views/card_renderer/card_view_component.ts
index d929266c63..2d4129b985 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_view_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_view_component.ts
@@ -24,6 +24,7 @@ import {PluginType} from '../../data_source';
 import {CardId} from '../../types';
 
 @Component({
+  standalone: false,
   selector: 'card-view-component',
   templateUrl: 'card_view_component.ng.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_view_container.ts b/tensorboard/webapp/metrics/views/card_renderer/card_view_container.ts
index 3c6986411b..bd9dff462a 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_view_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_view_container.ts
@@ -36,6 +36,7 @@ import {CardId} from '../../types';
 const RUN_COLOR_UPDATE_THROTTLE_TIME_IN_MS = 350;
 
 @Component({
+  standalone: false,
   selector: 'card-view',
   template: `
     <card-view-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_view_test.ts b/tensorboard/webapp/metrics/views/card_renderer/card_view_test.ts
index 48a29804b4..4d83e97af2 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_view_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_view_test.ts
@@ -35,6 +35,7 @@ import {CardViewComponent} from './card_view_component';
 import {CardViewContainer} from './card_view_container';
 
 @Component({
+  standalone: false,
   selector: 'scalar-card',
   template: ``,
 })
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ts
index a81164d5cc..adb1e71181 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ts
@@ -24,6 +24,7 @@ import {PluginType} from '../../data_source/types';
 import {CardMetadata} from '../../types';
 
 @Component({
+  standalone: false,
   selector: 'data_download_dialog_component',
   templateUrl: 'data_download_dialog_component.ng.html',
   styleUrls: ['data_download_dialog_component.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
index b20f3e4f26..9da802105f 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
@@ -32,6 +32,7 @@ export interface DataDownloadDialogData {
 }
 
 @Component({
+  standalone: false,
   selector: 'data_download_dialog',
   template: `<data_download_dialog_component
     [cardMetadata]="cardMetadata$ | async"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ts
index 1cf04ffb06..c67a0d41c6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ts
@@ -31,6 +31,7 @@ import {TimeSelection, XAxisType} from '../../types';
 import {TimeSelectionView} from './utils';
 
 @Component({
+  standalone: false,
   selector: 'histogram-card-component',
   templateUrl: 'histogram_card_component.ng.html',
   styleUrls: ['histogram_card_component.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_container.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_container.ts
index 155f7d2f32..72e815fcba 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_container.ts
@@ -65,6 +65,7 @@ type HistogramCardMetadata = CardMetadata & {
 };
 
 @Component({
+  standalone: false,
   selector: 'histogram-card',
   template: `
     <histogram-card-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
index 22ac970d64..9326f0e55b 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
@@ -58,6 +58,7 @@ import {RunNameModule} from './run_name_module';
 import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_warning_module';
 
 @Component({
+  standalone: false,
   selector: 'tb-histogram',
   template: ``,
 })
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ts
index 05ea963929..86a852be5e 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ts
@@ -28,6 +28,7 @@ import {TimeSelectionView} from './utils';
 const TICK_WIDTH = 12; // In px
 
 @Component({
+  standalone: false,
   selector: 'image-card-component',
   templateUrl: 'image_card_component.ng.html',
   styleUrls: ['image_card_component.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts
index 691fc35241..984306f18a 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts
@@ -68,6 +68,7 @@ type ImageCardMetadata = CardMetadata & {
 };
 
 @Component({
+  standalone: false,
   selector: 'image-card',
   template: `
     <image-card-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
index 3e6f995ab9..33ef483177 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
@@ -45,6 +45,7 @@ import {RunNameModule} from './run_name_module';
 import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_warning_module';
 
 @Component({
+  standalone: false,
   selector: 'card-view',
   template: `
     <image-card
diff --git a/tensorboard/webapp/metrics/views/card_renderer/run_name_component.ts b/tensorboard/webapp/metrics/views/card_renderer/run_name_component.ts
index c281bfabe2..e7ffae8404 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/run_name_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/run_name_component.ts
@@ -16,6 +16,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {ExperimentAlias} from '../../../experiments/types';
 
 @Component({
+  standalone: false,
   selector: 'card-run-name-component',
   template: `<tb-experiment-alias
       *ngIf="experimentAlias != null"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/run_name_container.ts b/tensorboard/webapp/metrics/views/card_renderer/run_name_container.ts
index 725e4f0cd7..156a96ddd8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/run_name_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/run_name_container.ts
@@ -26,6 +26,7 @@ import {
 import {getDisplayNameForRun} from './utils';
 
 @Component({
+  standalone: false,
   selector: 'card-run-name',
   template: `
     <card-run-name-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
index 989a76f616..0d1292fe63 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
@@ -76,6 +76,7 @@ type ScalarTooltipDatum = TooltipDatum<
 >;
 
 @Component({
+  standalone: false,
   selector: 'scalar-card-component',
   templateUrl: 'scalar_card_component.ng.html',
   styleUrls: ['scalar_card_component.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts
index 7ed3e22d5e..8daa65753b 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts
@@ -163,6 +163,7 @@ function areSeriesEqual(
 }
 
 @Component({
+  standalone: false,
   selector: 'scalar-card',
   template: `
     <scalar-card-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts
index 97602aaecf..410be6cb6d 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts
@@ -47,6 +47,7 @@ import {isDatumVisible} from './utils';
 import {memoize} from '../../../util/memoize';
 
 @Component({
+  standalone: false,
   selector: 'scalar-card-data-table',
   templateUrl: 'scalar_card_data_table.ng.html',
   styleUrls: ['scalar_card_data_table.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
index 4d0537076a..371477ab28 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
@@ -27,6 +27,7 @@ import {Scale} from '../../../widgets/line_chart_v2/lib/public_types';
 import {MinMaxStep} from './scalar_card_types';
 
 @Component({
+  standalone: false,
   selector: 'scalar-card-fob-controller',
   template: `
     <card-fob-controller
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
index fc26be3c7c..93afad7d0c 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
@@ -47,6 +47,7 @@ import {
 } from './scalar_card_types';
 
 @Component({
+  standalone: false,
   selector: 'scalar-card-line-chart-component',
   templateUrl: 'scalar_card_line_chart_component.ng.html',
   styleUrls: ['scalar_card_line_chart_component.css'],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
index 912bd6295c..d59869df01 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
@@ -62,6 +62,7 @@ import {TooltipTemplate} from '../../../widgets/line_chart_v2/line_chart_compone
 import {ScalarCardLineChartComponent} from './scalar_card_line_chart_component';
 
 @Component({
+  standalone: false,
   selector: 'scalar-card-line-chart',
   template: `
     <scalar-card-line-chart-component
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts
index 5b877d8140..5ac0927896 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts
@@ -85,6 +85,7 @@ import {Extent} from '../../../widgets/line_chart_v2/lib/public_types';
 import {provideMockTbStore} from '../../../testing/utils';
 
 @Component({
+  standalone: false,
   selector: 'line-chart',
   template: `
     {{ tooltipData | json }}
@@ -165,6 +166,7 @@ class TestableLineChart {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-scalar-card-line-chart',
   template: `
     <scalar-card-line-chart
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
index 3aa5062d41..d01555d546 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
@@ -139,6 +139,7 @@ import * as runsSelectors from '../../../runs/store/runs_selectors';
 import {getIsScalarColumnContextMenusEnabled} from '../../../selectors';
 
 @Component({
+  standalone: false,
   selector: 'line-chart',
   template: `
     {{ tooltipData | json }}
@@ -222,6 +223,7 @@ class TestableLineChart {
 // DataDownloadContainer pulls in entire redux and, for this test, we don't want to
 // know about their data requirements.
 @Component({
+  standalone: false,
   selector: 'testable-data-download-dialog',
   template: `{{ cardId }}`,
 })
diff --git a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.ts b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.ts
index bc972216c3..f7ef04e2cb 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.ts
@@ -18,6 +18,7 @@ import {TimeSelection} from '../../types';
 export type TimeSelectionWithClipped = TimeSelection & {clipped: boolean};
 
 @Component({
+  standalone: false,
   selector: 'vis-linked-time-selection-warning',
   template: `
     <mat-icon
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
index 3d71b0cef9..af51a27851 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
@@ -32,6 +32,7 @@ const MIN_CARD_MIN_WIDTH_IN_PX = 335;
 const MAX_CARD_MIN_WIDTH_IN_PX = 735;
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-grid-component',
   templateUrl: './card_grid_component.ng.html',
   styleUrls: ['./card_grid_component.css'],
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
index 9c4d4e04d5..0d390bd933 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
@@ -34,6 +34,7 @@ import {CardIdWithMetadata} from '../metrics_view_types';
 import * as selectors from '../../../selectors';
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-grid',
   template: `
     <metrics-card-grid-component
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts
index a9488e25fd..834b958baa 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts
@@ -48,6 +48,7 @@ import {CardGridContainer} from './card_grid_container';
 const scrollElementHeight = 100;
 
 @Component({
+  standalone: false,
   selector: 'testable-scrolling-container',
   template: `
     <div cdkScrollable>
diff --git a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.ts b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.ts
index bb16a145b2..429e11c830 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.ts
@@ -21,6 +21,7 @@ import {
 } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-group-toolbar-component',
   template: `
     <button
diff --git a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_container.ts b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_container.ts
index a09d6cbd67..044c51a07b 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_container.ts
@@ -20,6 +20,7 @@ import {getMetricsTagGroupExpansionState} from '../../../selectors';
 import {metricsTagGroupExpansionChanged} from '../../actions';
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-group-toolbar',
   template: `
     <metrics-card-group-toolbar-component
diff --git a/tensorboard/webapp/metrics/views/main_view/card_groups_component.ts b/tensorboard/webapp/metrics/views/main_view/card_groups_component.ts
index 11d2d3bb6f..198b97c18e 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_groups_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_groups_component.ts
@@ -18,6 +18,7 @@ import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardGroup} from '../metrics_view_types';
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-groups-component',
   template: `
     <div
diff --git a/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts b/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
index b77b45b1ad..48a8296555 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
@@ -24,6 +24,7 @@ import {CardGroup} from '../metrics_view_types';
 import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
 
 @Component({
+  standalone: false,
   selector: 'metrics-card-groups',
   template: `
     <metrics-card-groups-component
diff --git a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_component.ts b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_component.ts
index e2a80ccfc5..bed0aee7ac 100644
--- a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_component.ts
@@ -30,6 +30,7 @@ declare namespace Intl {
 }
 
 @Component({
+  standalone: false,
   selector: 'metrics-empty-tag-match-component',
   template: `No matches for tag filter <code>/{{ tagFilterRegex }}/</code
     ><span *ngIf="pluginTypes.size">
diff --git a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
index 70d3bc7e2a..bd32f690b8 100644
--- a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
@@ -25,6 +25,7 @@ import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
  * Warning message that displays when no tags do not match filter query.
  */
 @Component({
+  standalone: false,
   selector: 'metrics-empty-tag-match',
   template: `
     <metrics-empty-tag-match-component
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.ts b/tensorboard/webapp/metrics/views/main_view/filter_input_component.ts
index c88aee2411..754c0ca169 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.ts
@@ -23,6 +23,7 @@ import {
 import {escapeForRegex} from '../../../util/string';
 
 @Component({
+  standalone: false,
   selector: 'metrics-tag-filter-component',
   templateUrl: 'filter_input_component.ng.html',
   styleUrls: [`filter_input_component.css`],
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts b/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
index e14afacfed..d0b586d8be 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
@@ -26,6 +26,7 @@ import {getMetricsFilteredPluginTypes} from '../../store';
 import {compareTagNames} from '../../utils';
 
 @Component({
+  standalone: false,
   selector: 'metrics-tag-filter',
   template: `
     <metrics-tag-filter-component
diff --git a/tensorboard/webapp/metrics/views/main_view/filtered_view_component.ts b/tensorboard/webapp/metrics/views/main_view/filtered_view_component.ts
index c96af8f0db..905fab42f5 100644
--- a/tensorboard/webapp/metrics/views/main_view/filtered_view_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filtered_view_component.ts
@@ -17,6 +17,7 @@ import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardIdWithMetadata} from '../metrics_view_types';
 
 @Component({
+  standalone: false,
   selector: 'metrics-filtered-view-component',
   template: `
     <div class="group-toolbar">
diff --git a/tensorboard/webapp/metrics/views/main_view/filtered_view_container.ts b/tensorboard/webapp/metrics/views/main_view/filtered_view_container.ts
index dc4d5f2166..1c3131a3b3 100644
--- a/tensorboard/webapp/metrics/views/main_view/filtered_view_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filtered_view_container.ts
@@ -37,6 +37,7 @@ export const FILTER_VIEW_DEBOUNCE_IN_MS = 200;
  * An area showing cards that match the tag filter.
  */
 @Component({
+  standalone: false,
   selector: 'metrics-filtered-view',
   template: `
     <metrics-filtered-view-component
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.ts b/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
index 0ce38ba82f..1ac764b3ab 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
@@ -33,6 +33,7 @@ export const SHARE_BUTTON_COMPONENT = new InjectionToken<Type<Component>>(
 );
 
 @Component({
+  standalone: false,
   selector: 'metrics-main-view-component',
   templateUrl: 'main_view_component.ng.html',
   styleUrls: ['main_view_component.css'],
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_container.ts b/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
index 41008f36bc..8e3d8551f7 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
@@ -34,6 +34,7 @@ import {
 import {PluginType} from '../../types';
 
 @Component({
+  standalone: false,
   selector: 'metrics-main-view',
   template: `
     <metrics-main-view-component
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_test.ts b/tensorboard/webapp/metrics/views/main_view/main_view_test.ts
index 9ce15ee4a7..80e0e16fa4 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_test.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_test.ts
@@ -72,6 +72,7 @@ import {PinnedViewContainer} from './pinned_view_container';
 import {buildMockState} from '../../../testing/utils';
 
 @Component({
+  standalone: false,
   selector: 'card-view',
   template: `{{ pluginType }}: {{ cardId }}`,
 })
@@ -82,6 +83,7 @@ class TestableCard {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-share-button',
   template: ``,
 })
diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts
index 3d8583bf34..f3122285ff 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts
@@ -23,6 +23,7 @@ import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardIdWithMetadata} from '../metrics_view_types';
 
 @Component({
+  standalone: false,
   selector: 'metrics-pinned-view-component',
   template: `
     <div class="group-toolbar">
diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts b/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
index c280008c93..6472e59ccb 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
@@ -25,6 +25,7 @@ import {metricsClearAllPinnedCards} from '../../actions';
 import {getEnableGlobalPins} from '../../../selectors';
 
 @Component({
+  standalone: false,
   selector: 'metrics-pinned-view',
   template: `
     <metrics-pinned-view-component
diff --git a/tensorboard/webapp/metrics/views/metrics_container.ts b/tensorboard/webapp/metrics/views/metrics_container.ts
index d5ee63885a..ed9a27cf04 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.ts
+++ b/tensorboard/webapp/metrics/views/metrics_container.ts
@@ -18,6 +18,7 @@ import {State} from '../../app_state';
 import {getRunsTableFullScreen} from '../../core/store/core_selectors';
 
 @Component({
+  standalone: false,
   selector: 'metrics-dashboard',
   template: `
     <tb-dashboard-layout>
diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_component.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_component.ts
index 4ca9fe63b7..1c0f37c8de 100644
--- a/tensorboard/webapp/metrics/views/right_pane/right_pane_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/right_pane_component.ts
@@ -15,6 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'metrics-dashboard-right-pane',
   template: `<metrics-dashboard-settings></metrics-dashboard-settings>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.ts b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.ts
index 6ff9117601..37d7a413b1 100644
--- a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.ts
@@ -25,6 +25,7 @@ import {
 } from '@angular/material/checkbox';
 
 @Component({
+  standalone: false,
   selector: 'saving-pins-checkbox',
   template: `
     <div class="saving-pins-checkbox">
diff --git a/tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/saving_pins_dialog_component.ts b/tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/saving_pins_dialog_component.ts
index 002d5fe93e..10bebd887a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/saving_pins_dialog_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/saving_pins_dialog_component.ts
@@ -27,6 +27,7 @@ export interface SavingPinsDialogResult {
  * A confirmation dialog for disabling saving pin feature.
  */
 @Component({
+  standalone: false,
   selector: 'saving-pins-dialog',
   templateUrl: './saving_pins_dialog_component.ng.html',
   styleUrls: ['saving_pins_dialog_component.css'],
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
index 02ffd555fd..6afc328ad0 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
@@ -45,6 +45,7 @@ enum Edge {
 }
 
 @Component({
+  standalone: false,
   selector: 'metrics-scalar-column-editor-component',
   templateUrl: 'scalar_column_editor_component.ng.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_container.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_container.ts
index f0e15d3c60..43bd157295 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_container.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_container.ts
@@ -38,6 +38,7 @@ function headersWithoutRuns(headers: ColumnHeader[]) {
 }
 
 @Component({
+  standalone: false,
   selector: 'metrics-scalar-column-editor',
   template: `
     <metrics-scalar-column-editor-component
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
index f6878cf051..44d4a65017 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
@@ -55,6 +55,7 @@ const MAX_SMOOTHING_VALUE = SCALARS_SMOOTHING_MAX;
 const MAX_SMOOTHING_SLIDER_VALUE = 0.99;
 
 @Component({
+  standalone: false,
   selector: 'metrics-dashboard-settings-component',
   templateUrl: 'settings_view_component.ng.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_container.ts b/tensorboard/webapp/metrics/views/right_pane/settings_view_container.ts
index 2f3d7213f7..8b7a6fb2fb 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_container.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_container.ts
@@ -47,6 +47,7 @@ import {
 } from './saving_pins_dialog/saving_pins_dialog_component';
 
 @Component({
+  standalone: false,
   selector: 'metrics-dashboard-settings',
   template: `
     <metrics-dashboard-settings-component
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.ts b/tensorboard/webapp/notification_center/_views/notification_center_component.ts
index caade2bb14..093fd48ddf 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.ts
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.ts
@@ -17,6 +17,7 @@ import {CategoryEnum} from '../_redux/notification_center_types';
 import {ViewNotificationExt} from './view_types';
 
 @Component({
+  standalone: false,
   selector: 'notification-center-component',
   templateUrl: './notification_center_component.ng.html',
   styleUrls: ['./notification_center_component.css'],
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_container.ts b/tensorboard/webapp/notification_center/_views/notification_center_container.ts
index c1b8b08f09..186c43d096 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_container.ts
+++ b/tensorboard/webapp/notification_center/_views/notification_center_container.ts
@@ -28,6 +28,7 @@ import {ViewNotificationExt} from './view_types';
 const iconMap = new Map([[CategoryEnum.WHATS_NEW, 'info_outline_24px']]);
 
 @Component({
+  standalone: false,
   selector: 'notification-center',
   template: `
     <notification-center-component
diff --git a/tensorboard/webapp/plugins/plugins_component.ts b/tensorboard/webapp/plugins/plugins_component.ts
index 6da2550ba8..eb1d608a24 100644
--- a/tensorboard/webapp/plugins/plugins_component.ts
+++ b/tensorboard/webapp/plugins/plugins_component.ts
@@ -56,6 +56,7 @@ export enum PluginLoadState {
 }
 
 @Component({
+  standalone: false,
   selector: 'plugins-component',
   templateUrl: './plugins_component.ng.html',
   styleUrls: ['plugins_component.css'],
diff --git a/tensorboard/webapp/plugins/plugins_container.ts b/tensorboard/webapp/plugins/plugins_container.ts
index 8e2563a344..6a0b056424 100644
--- a/tensorboard/webapp/plugins/plugins_container.ts
+++ b/tensorboard/webapp/plugins/plugins_container.ts
@@ -53,6 +53,7 @@ const activePlugin = createSelector(
 );
 
 @Component({
+  standalone: false,
   selector: 'plugins',
   template: `
     <plugins-component
diff --git a/tensorboard/webapp/plugins/plugins_container_test.ts b/tensorboard/webapp/plugins/plugins_container_test.ts
index 996a082083..bbbe4172ee 100644
--- a/tensorboard/webapp/plugins/plugins_container_test.ts
+++ b/tensorboard/webapp/plugins/plugins_container_test.ts
@@ -64,6 +64,7 @@ function expectPluginIframe(element: HTMLElement, name: string) {
  * the `plugins` component.
  */
 @Component({
+  standalone: false,
   template: `
     <ng-template #environmentFailureNotFoundTemplate>
       <h3 class="custom-not-found-template">Custom Not Found Error</h3>
diff --git a/tensorboard/webapp/plugins/testing/index.ts b/tensorboard/webapp/plugins/testing/index.ts
index 6dc92e29bb..78807d8a61 100644
--- a/tensorboard/webapp/plugins/testing/index.ts
+++ b/tensorboard/webapp/plugins/testing/index.ts
@@ -16,6 +16,7 @@ import {Component, NgModule} from '@angular/core';
 import {PluginRegistryModule} from '../plugin_registry_module';
 
 @Component({
+  standalone: false,
   selector: 'extra-dashboard',
   template: ` <div>I'm the extra Angular dashboard!</div> `,
 })
diff --git a/tensorboard/webapp/reloader/reloader_component.ts b/tensorboard/webapp/reloader/reloader_component.ts
index b3671dd125..54d9950d86 100644
--- a/tensorboard/webapp/reloader/reloader_component.ts
+++ b/tensorboard/webapp/reloader/reloader_component.ts
@@ -21,6 +21,7 @@ import {reload} from '../core/actions';
 import {selectors as settingsSelectors, State} from '../settings';
 
 @Component({
+  standalone: false,
   selector: 'reloader',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/runs/views/runs_selector/runs_selector_component.ts b/tensorboard/webapp/runs/views/runs_selector/runs_selector_component.ts
index db7d189a72..c6c897224a 100644
--- a/tensorboard/webapp/runs/views/runs_selector/runs_selector_component.ts
+++ b/tensorboard/webapp/runs/views/runs_selector/runs_selector_component.ts
@@ -16,6 +16,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {RunsTableColumn} from '../runs_table/types';
 
 @Component({
+  standalone: false,
   selector: 'runs-selector-component',
   template: `
     <runs-table
diff --git a/tensorboard/webapp/runs/views/runs_selector/runs_selector_container.ts b/tensorboard/webapp/runs/views/runs_selector/runs_selector_container.ts
index 78414a21e2..681b1a2a36 100644
--- a/tensorboard/webapp/runs/views/runs_selector/runs_selector_container.ts
+++ b/tensorboard/webapp/runs/views/runs_selector/runs_selector_container.ts
@@ -20,6 +20,7 @@ import {getExperimentIdsFromRoute} from '../../../selectors';
 import {RunsTableColumn} from '../runs_table/types';
 
 @Component({
+  standalone: false,
   selector: 'runs-selector',
   template: `
     <runs-selector-component
diff --git a/tensorboard/webapp/runs/views/runs_table/filterbar_component.ts b/tensorboard/webapp/runs/views/runs_table/filterbar_component.ts
index 369cf2e838..9d7715ce70 100644
--- a/tensorboard/webapp/runs/views/runs_table/filterbar_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/filterbar_component.ts
@@ -32,6 +32,7 @@ import {RangeValues} from '../../../widgets/range_input/types';
 import {CustomModal} from '../../../widgets/custom_modal/custom_modal';
 
 @Component({
+  standalone: false,
   selector: 'filterbar-component',
   templateUrl: 'filterbar_component.ng.html',
   styleUrls: ['filterbar_component.css'],
diff --git a/tensorboard/webapp/runs/views/runs_table/filterbar_container.ts b/tensorboard/webapp/runs/views/runs_table/filterbar_container.ts
index 2439dd5386..d2f93c0ee9 100644
--- a/tensorboard/webapp/runs/views/runs_table/filterbar_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/filterbar_container.ts
@@ -23,6 +23,7 @@ import {
 import {FilterAddedEvent} from '../../../widgets/data_table/types';
 
 @Component({
+  standalone: false,
   selector: 'filterbar',
   template: `<filterbar-component
     [filters]="filters$ | async"
diff --git a/tensorboard/webapp/runs/views/runs_table/filterbar_test.ts b/tensorboard/webapp/runs/views/runs_table/filterbar_test.ts
index ff6e547e2d..c4b97d348d 100644
--- a/tensorboard/webapp/runs/views/runs_table/filterbar_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/filterbar_test.ts
@@ -61,6 +61,7 @@ const fakeFilterMap = new Map<string, DiscreteFilter | IntervalFilter>([
 ]);
 
 @Component({
+  standalone: false,
   selector: 'testable-component',
   template: ` <filterbar></filterbar> `,
 })
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
index a3cc43951d..f1a1dd24cb 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
@@ -33,6 +33,7 @@ export interface ColorGroup {
 }
 
 @Component({
+  standalone: false,
   selector: 'regex-edit-dialog-component',
   templateUrl: 'regex_edit_dialog.ng.html',
   styleUrls: ['regex_edit_dialog_component.css'],
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
index ff92d99092..17e36c402f 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
@@ -46,6 +46,7 @@ import {ColorGroup} from './regex_edit_dialog_component';
 const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
 
 @Component({
+  standalone: false,
   selector: 'regex-edit-dialog',
   template: `<regex-edit-dialog-component
     [regexString]="groupByRegexString$ | async"
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
index 57e75098a4..9f207d3986 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
@@ -32,6 +32,7 @@ import {
 } from '../../../widgets/data_table/types';
 import {memoize} from '../../../util/memoize';
 @Component({
+  standalone: false,
   selector: 'runs-data-table',
   templateUrl: 'runs_data_table.ng.html',
   styleUrls: ['runs_data_table.css'],
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
index 6f5d9c411b..b266c1dce8 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
@@ -34,6 +34,7 @@ import {FilterInputModule} from '../../../widgets/filter_input/filter_input_modu
 import {sendKeys} from '../../../testing/dom';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <runs-data-table
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
index 794e30941f..a0864a1c27 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
@@ -24,6 +24,7 @@ import {GroupBy, GroupByKey} from '../../types';
 import {RegexEditDialogContainer} from './regex_edit_dialog_container';
 
 @Component({
+  standalone: false,
   selector: 'runs-group-menu-button-component',
   templateUrl: 'runs_group_menu_button_component.ng.html',
   styleUrls: ['runs_group_menu_button_component.css'],
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_container.ts b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_container.ts
index 51b6117ce5..2375cb0d71 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_container.ts
@@ -34,6 +34,7 @@ import {GroupBy, GroupByKey} from '../../types';
  * Renders run grouping menu controls.
  */
 @Component({
+  standalone: false,
   selector: 'runs-group-menu-button',
   template: `
     <runs-group-menu-button-component
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
index bac141cbc5..5a0feffa33 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
@@ -88,6 +88,7 @@ const getRunsLoading = createSelector<
  * update when input bindings change.
  */
 @Component({
+  standalone: false,
   selector: 'runs-table',
   template: `
     <runs-data-table
diff --git a/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_component.ts b/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_component.ts
index a97a007687..abbf82ee04 100644
--- a/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_component.ts
+++ b/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_component.ts
@@ -26,6 +26,7 @@ interface PolymerChangeEvent extends CustomEvent {
 }
 
 @Component({
+  standalone: false,
   selector: 'tb-legacy-runs-selector-component',
   template: ` <tf-runs-selector #selector></tf-runs-selector> `,
 })
diff --git a/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_container.ts b/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_container.ts
index ca848414c1..05fd8d92ec 100644
--- a/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_container.ts
+++ b/tensorboard/webapp/runs_legacy/views/legacy_runs_selector/legacy_runs_selector_container.ts
@@ -18,6 +18,7 @@ import {State} from '../../../app_state';
 import {polymerInteropRunSelectionChanged} from '../../../core/actions';
 
 @Component({
+  standalone: false,
   selector: 'tb-legacy-runs-selector',
   template: `
     <tb-legacy-runs-selector-component
diff --git a/tensorboard/webapp/settings/_views/polymer_interop_container.ts b/tensorboard/webapp/settings/_views/polymer_interop_container.ts
index adfd3fc850..9f9383bb3a 100644
--- a/tensorboard/webapp/settings/_views/polymer_interop_container.ts
+++ b/tensorboard/webapp/settings/_views/polymer_interop_container.ts
@@ -30,6 +30,7 @@ import {State} from '../_redux/settings_types';
  * only (2) kinds. For (1), please refer to the hash_storage.
  */
 @Component({
+  standalone: false,
   selector: 'settings-polymer-interop',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tensorboard/webapp/settings/_views/settings_button_component.ts b/tensorboard/webapp/settings/_views/settings_button_component.ts
index f403b2cc27..4e65ce9732 100644
--- a/tensorboard/webapp/settings/_views/settings_button_component.ts
+++ b/tensorboard/webapp/settings/_views/settings_button_component.ts
@@ -18,6 +18,7 @@ import {DataLoadState} from '../../types/data';
 import {SettingsDialogContainer} from './settings_dialog_container';
 
 @Component({
+  standalone: false,
   selector: 'settings-button-component',
   template: `
     <button
diff --git a/tensorboard/webapp/settings/_views/settings_button_container.ts b/tensorboard/webapp/settings/_views/settings_button_container.ts
index 97e51a9cdc..83ec77f7be 100644
--- a/tensorboard/webapp/settings/_views/settings_button_container.ts
+++ b/tensorboard/webapp/settings/_views/settings_button_container.ts
@@ -18,6 +18,7 @@ import {getSettingsLoadState} from '../_redux/settings_selectors';
 import {State} from '../_redux/settings_types';
 
 @Component({
+  standalone: false,
   selector: 'settings-button',
   template: `
     <settings-button-component
diff --git a/tensorboard/webapp/settings/_views/settings_dialog_component.ts b/tensorboard/webapp/settings/_views/settings_dialog_component.ts
index c88f610746..86f0504347 100644
--- a/tensorboard/webapp/settings/_views/settings_dialog_component.ts
+++ b/tensorboard/webapp/settings/_views/settings_dialog_component.ts
@@ -41,6 +41,7 @@ export function createIntegerValidator(): ValidatorFn {
 }
 
 @Component({
+  standalone: false,
   selector: 'settings-dialog-component',
   templateUrl: 'settings_dialog_component.ng.html',
   styleUrls: ['./settings_dialog_component.css'],
diff --git a/tensorboard/webapp/settings/_views/settings_dialog_container.ts b/tensorboard/webapp/settings/_views/settings_dialog_container.ts
index daa1315361..85ea32cf80 100644
--- a/tensorboard/webapp/settings/_views/settings_dialog_container.ts
+++ b/tensorboard/webapp/settings/_views/settings_dialog_container.ts
@@ -27,6 +27,7 @@ import {
 import {State} from '../_redux/settings_types';
 
 @Component({
+  standalone: false,
   selector: 'settings-dialog',
   template: `
     <settings-dialog-component
diff --git a/tensorboard/webapp/tb_wrapper/tb_wrapper_component.ts b/tensorboard/webapp/tb_wrapper/tb_wrapper_component.ts
index bd8ea6edbe..28cd926fb0 100644
--- a/tensorboard/webapp/tb_wrapper/tb_wrapper_component.ts
+++ b/tensorboard/webapp/tb_wrapper/tb_wrapper_component.ts
@@ -15,6 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'tensorboard-wrapper-component',
   template: `
     <plugins class="plugins"></plugins>
diff --git a/tensorboard/webapp/testing/integration_test_module.ts b/tensorboard/webapp/testing/integration_test_module.ts
index d67da7e0bb..3aca9baff3 100644
--- a/tensorboard/webapp/testing/integration_test_module.ts
+++ b/tensorboard/webapp/testing/integration_test_module.ts
@@ -31,6 +31,7 @@ import {RunsModule} from '../runs/runs_module';
 import {MatIconTestingModule} from './mat_icon_module';
 
 @Component({
+  standalone: false,
   selector: 'test',
   template: 'hello',
 })
diff --git a/tensorboard/webapp/testing/mat_icon_module.ts b/tensorboard/webapp/testing/mat_icon_module.ts
index e1f411e599..c37a7f3626 100644
--- a/tensorboard/webapp/testing/mat_icon_module.ts
+++ b/tensorboard/webapp/testing/mat_icon_module.ts
@@ -74,6 +74,7 @@ const KNOWN_SVG_ICON = new Set([
  * compilation time due to unknown input onto the template.
  */
 @Component({
+  standalone: false,
   template: '<ng-container>{{svgIcon}}</ng-container>',
   selector: 'mat-icon',
 })
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_component.ts b/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
index 7e1be91725..1e6da00fbb 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
@@ -25,6 +25,7 @@ import {
 } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'card-fob',
   templateUrl: 'card_fob_component.ng.html',
   styleUrls: ['card_fob_component.css'],
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts b/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts
index c15213aa20..f23bd3092b 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts
@@ -43,6 +43,7 @@ const TIME_SELECTION_TO_FOB: Record<keyof TimeSelection, Fob> = {
 };
 
 @Component({
+  standalone: false,
   selector: 'card-fob-controller',
   templateUrl: 'card_fob_controller_component.ng.html',
   styleUrls: ['card_fob_controller_component.css'],
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts b/tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts
index de62165756..061cd09504 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts
@@ -27,6 +27,7 @@ import {
 } from './card_fob_types';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <card-fob-controller
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_test.ts b/tensorboard/webapp/widgets/card_fob/card_fob_test.ts
index b5187aa9f2..30b7ee2a03 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_test.ts
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_test.ts
@@ -20,6 +20,7 @@ import {CardFobComponent} from './card_fob_component';
 import {AxisDirection} from './card_fob_types';
 
 @Component({
+  standalone: false,
   selector: 'testable-fob-comp',
   template: `
     <card-fob
diff --git a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
index 5abd720805..1341492e23 100644
--- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
+++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
@@ -54,6 +54,7 @@ declare global {
  * will not respond to those.
  */
 @Component({
+  standalone: false,
   selector: 'content-wrapping-input',
   template: `
     <span [class.container]="true" [class.is-valid]="isValid">
diff --git a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_test.ts b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_test.ts
index 964cfc35f8..a47deaf39d 100644
--- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_test.ts
+++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_test.ts
@@ -20,6 +20,7 @@ import {KeyType, sendKey} from '../../testing/dom';
 import {ContentWrappingInputComponent} from './content_wrapping_input_component';
 
 @Component({
+  standalone: false,
   selector: 'testing-component',
   template: `
     <content-wrapping-input
diff --git a/tensorboard/webapp/widgets/custom_modal/custom_modal_test.ts b/tensorboard/webapp/widgets/custom_modal/custom_modal_test.ts
index 12f5a90d5e..9326e2299f 100644
--- a/tensorboard/webapp/widgets/custom_modal/custom_modal_test.ts
+++ b/tensorboard/webapp/widgets/custom_modal/custom_modal_test.ts
@@ -31,6 +31,7 @@ import {Overlay, OverlayModule, OverlayRef} from '@angular/cdk/overlay';
 import {first} from 'rxjs/operators';
 
 @Component({
+  standalone: false,
   selector: 'fake-modal-view-container',
   template: `
     <button class="modal-trigger-button">Modal trigger button</button>
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.ts b/tensorboard/webapp/widgets/data_table/column_selector_component.ts
index 8ff421384b..fffdb11c5c 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.ts
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.ts
@@ -28,6 +28,7 @@ import {ColumnHeader} from './types';
 import {BehaviorSubject} from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-column-selector-component',
   templateUrl: 'column_selector_component.ng.html',
   styleUrls: ['column_selector_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/content_cell_component.ts b/tensorboard/webapp/widgets/data_table/content_cell_component.ts
index e4a644b6c4..bf7c226270 100644
--- a/tensorboard/webapp/widgets/data_table/content_cell_component.ts
+++ b/tensorboard/webapp/widgets/data_table/content_cell_component.ts
@@ -28,6 +28,7 @@ import {
 } from '../line_chart_v2/lib/formatter';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-content-cell',
   templateUrl: 'content_cell_component.ng.html',
   styleUrls: ['content_cell_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/content_cell_component_test.ts b/tensorboard/webapp/widgets/data_table/content_cell_component_test.ts
index 658b58f91f..93b48e2ba7 100644
--- a/tensorboard/webapp/widgets/data_table/content_cell_component_test.ts
+++ b/tensorboard/webapp/widgets/data_table/content_cell_component_test.ts
@@ -22,6 +22,7 @@ import {DataTableModule} from './data_table_module';
 import {ContentCellComponent} from './content_cell_component';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <tb-data-table-content-cell
diff --git a/tensorboard/webapp/widgets/data_table/content_row_component.ts b/tensorboard/webapp/widgets/data_table/content_row_component.ts
index bca0880e44..29744388dc 100644
--- a/tensorboard/webapp/widgets/data_table/content_row_component.ts
+++ b/tensorboard/webapp/widgets/data_table/content_row_component.ts
@@ -15,6 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-content-row',
   template: ` <ng-content></ng-content> `,
   styles: [
diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.ts b/tensorboard/webapp/widgets/data_table/context_menu_component.ts
index c8badab914..990797d796 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.ts
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.ts
@@ -23,6 +23,7 @@ import {
 import {ColumnHeader, Side, SortingInfo, SortingOrder} from './types';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-context-menu',
   templateUrl: 'context_menu_component.ng.html',
   styleUrls: ['context_menu_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.ts b/tensorboard/webapp/widgets/data_table/data_table_component.ts
index f4e1f108e1..3a4fce1a3b 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.ts
@@ -53,6 +53,7 @@ const preventDefault = function (e: MouseEvent) {
 };
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table',
   templateUrl: 'data_table_component.ng.html',
   styleUrls: ['data_table_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/data_table_header_component.ts b/tensorboard/webapp/widgets/data_table/data_table_header_component.ts
index 63f84a255d..100ce39d75 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_header_component.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_header_component.ts
@@ -17,6 +17,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {ColumnHeader, ColumnHeaderType} from './types';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-header',
   templateUrl: 'data_table_header_component.ng.html',
   styleUrls: ['data_table_header_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/data_table_test.ts b/tensorboard/webapp/widgets/data_table/data_table_test.ts
index 6ec0d1b542..4e7e8faa2d 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_test.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_test.ts
@@ -48,6 +48,7 @@ import {CustomModal} from '../custom_modal/custom_modal';
 const ADD_BUTTON_PREDICATE = By.css('.add-button');
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <tb-data-table
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.ts b/tensorboard/webapp/widgets/data_table/filter_dialog_component.ts
index aab4c42340..fd9de24a97 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.ts
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.ts
@@ -22,6 +22,7 @@ import {
 import {RangeValues} from '../range_input/types';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-filter',
   templateUrl: 'filter_dialog_component.ng.html',
   styleUrls: ['filter_dialog_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.ts b/tensorboard/webapp/widgets/data_table/header_cell_component.ts
index 4a5a248d39..9a45d14ecc 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.ts
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.ts
@@ -25,6 +25,7 @@ import {ColumnHeader, SortingInfo, SortingOrder} from './types';
 import {BehaviorSubject} from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'tb-data-table-header-cell',
   templateUrl: 'header_cell_component.ng.html',
   styleUrls: ['header_cell_component.css'],
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component_test.ts b/tensorboard/webapp/widgets/data_table/header_cell_component_test.ts
index 92c37df8d9..bf57bd9c6a 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component_test.ts
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component_test.ts
@@ -32,6 +32,7 @@ import {DataTableModule} from './data_table_module';
 import {HeaderCellComponent} from './header_cell_component';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <tb-data-table-header-cell
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
index 026a8671c1..ce48cca182 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
@@ -31,6 +31,7 @@ export interface DropdownOption {
  * A generic dropdown with options, similar to <select>.
  */
 @Component({
+  standalone: false,
   selector: 'tb-dropdown',
   template: `
     <mat-select
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
index 9f7e599aee..effd55af51 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
@@ -25,6 +25,7 @@ import {DropdownComponent, DropdownOption} from './dropdown_component';
  * Test class that uses the <tb-dropdown> component.
  */
 @Component({
+  standalone: false,
   selector: 'testing-component',
   template: `
     <tb-dropdown
diff --git a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.ts b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.ts
index 1ee493b59b..7f13f94794 100644
--- a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.ts
+++ b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.ts
@@ -20,6 +20,7 @@ import {ExperimentAlias} from '../../experiments/types';
  * this experiment from others.
  */
 @Component({
+  standalone: false,
   selector: 'tb-experiment-alias',
   template: `
     <span class="alias-number">{{ alias.aliasNumber }}</span>
diff --git a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_test.ts b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_test.ts
index 0699ab49aa..794e5e0789 100644
--- a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_test.ts
+++ b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_test.ts
@@ -21,6 +21,7 @@ import {ContentWrappingInputModule} from '../content_wrapping_input/content_wrap
 import {ExperimentAliasComponent} from './experiment_alias_component';
 
 @Component({
+  standalone: false,
   selector: 'testable',
   template: `<tb-experiment-alias
     [alias]="alias"
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
index 8343ee46b4..1bd872b673 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
@@ -19,6 +19,7 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
  * A text input field intended for filtering items.
  */
 @Component({
+  standalone: false,
   selector: 'tb-filter-input',
   template: `
     <mat-icon svgIcon="search_24px"></mat-icon>
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
index 8b811c0b63..8c78d4d0af 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
@@ -24,6 +24,7 @@ import {MatIconTestingModule} from '../../testing/mat_icon_module';
 import {FilterInputModule} from './filter_input_module';
 
 @Component({
+  standalone: false,
   selector: 'test',
   template: `
     <tb-filter-input [value]="value" [matAutocomplete]="filterMatches">
@@ -45,6 +46,7 @@ class TestableInputWithCompletions {
 }
 
 @Component({
+  standalone: false,
   selector: 'test',
   template: ` <tb-filter-input></tb-filter-input> `,
 })
diff --git a/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts b/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
index dd188539d8..e770597729 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
+++ b/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
@@ -25,6 +25,7 @@ import {
 import {TemporalScale} from './histogram_component';
 
 @Component({
+  standalone: false,
   selector: 'histogram-card-fob-controller',
   template: `
     <card-fob-controller
diff --git a/tensorboard/webapp/widgets/histogram/histogram_component.ts b/tensorboard/webapp/widgets/histogram/histogram_component.ts
index fdeaa5eca7..a67ac8d959 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_component.ts
+++ b/tensorboard/webapp/widgets/histogram/histogram_component.ts
@@ -82,6 +82,7 @@ export interface TooltipData {
 }
 
 @Component({
+  standalone: false,
   selector: 'tb-histogram',
   templateUrl: 'histogram_component.ng.html',
   styleUrls: ['histogram_component.css'],
diff --git a/tensorboard/webapp/widgets/histogram/histogram_test.ts b/tensorboard/webapp/widgets/histogram/histogram_test.ts
index 74980fc353..b0101f12cf 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_test.ts
+++ b/tensorboard/webapp/widgets/histogram/histogram_test.ts
@@ -66,6 +66,7 @@ function buildHistogramDatum(
 // Wrapper component required to properly trigger Angular lifecycles.
 // Without it, ngOnChanges do not get triggered before ngOnInit.
 @Component({
+  standalone: false,
   selector: 'testable-tb-histogram',
   template: `
     <tb-histogram
diff --git a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_test.ts b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_test.ts
index 7e51c4e8ec..4fd2da61ff 100644
--- a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_test.ts
+++ b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_test.ts
@@ -19,6 +19,7 @@ import {TestBed} from '@angular/core/testing';
 import {IntersectionObserverDirective} from './intersection_observer_directive';
 
 @Component({
+  standalone: false,
   selector: 'testing-component',
   template: `
     <div class="container" cdkScrollable>
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
index ec99acb10b..34d0c54923 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
@@ -70,6 +70,7 @@ export interface TemplateContext {
 }
 
 @Component({
+  standalone: false,
   selector: 'line-chart',
   templateUrl: 'line_chart_component.ng.html',
   styleUrls: ['line_chart_component.css'],
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component_test.ts b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component_test.ts
index a6aa46dee8..53edfbb729 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component_test.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component_test.ts
@@ -38,6 +38,7 @@ import {buildMetadata, buildSeries} from './lib/testing';
 import {LineChartComponent} from './line_chart_component';
 
 @Component({
+  standalone: false,
   selector: 'line-chart-grid-view',
   template: ``,
 })
@@ -50,6 +51,7 @@ class FakeGridComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <line-chart
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
index 9931902217..6b6ccfaafd 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
@@ -30,6 +30,7 @@ import {AxisUtils, MajorTick, MinorTick} from './line_chart_axis_utils';
 const AXIS_FONT = '11px Roboto, sans-serif';
 
 @Component({
+  standalone: false,
   selector: 'line-chart-axis',
   templateUrl: 'line_chart_axis_view.ng.html',
   styleUrls: ['line_chart_axis_view.css'],
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
index 8217ab00d7..43e0857984 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
@@ -30,6 +30,7 @@ import {AxisUtils} from './line_chart_axis_utils';
 import {LineChartAxisComponent} from './line_chart_axis_view';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <line-chart-axis
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view.ts
index db5789ae73..4272db8ca8 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view.ts
@@ -20,6 +20,7 @@ import {
 } from './chart_view_utils';
 
 @Component({
+  standalone: false,
   selector: 'line-chart-grid-view',
   template: `<svg>
     <line
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view_test.ts
index 2f5e83fc7a..03a12568a2 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view_test.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_grid_view_test.ts
@@ -21,6 +21,7 @@ import {createScale} from '../lib/scale';
 import {LineChartGridView} from './line_chart_grid_view';
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <line-chart-grid-view
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
index 173662cf15..c2b4ffd20c 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
@@ -87,6 +87,7 @@ export interface TooltipTemplateContext {
 export type TooltipTemplate = TemplateRef<TooltipTemplateContext>;
 
 @Component({
+  standalone: false,
   selector: 'line-chart-interactive-view',
   templateUrl: './line_chart_interactive_view.ng.html',
   styleUrls: ['./line_chart_interactive_view.css'],
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view_test.ts
index b31bcc3a96..27fb2568aa 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view_test.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view_test.ts
@@ -38,6 +38,7 @@ interface Coord {
 }
 
 @Component({
+  standalone: false,
   selector: 'testable-comp',
   template: `
     <line-chart-interactive-view
diff --git a/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts b/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts
index 4cc9f0ce0f..4b9399c40d 100644
--- a/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts
+++ b/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component.ts
@@ -25,6 +25,7 @@ import {
 import {marked} from '../../third_party/marked';
 
 @Component({
+  standalone: false,
   selector: 'markdown-renderer',
   templateUrl: './markdown_renderer_component.ng.html',
   styleUrls: ['./markdown_renderer_component.css'],
diff --git a/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component_test.ts b/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component_test.ts
index 6c1b34f06f..fd1000d968 100644
--- a/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component_test.ts
+++ b/tensorboard/webapp/widgets/markdown_renderer/markdown_renderer_component_test.ts
@@ -24,6 +24,7 @@ import {
 import {MarkdownRendererComponent} from './markdown_renderer_component';
 
 @Component({
+  standalone: false,
   selector: 'testable-markdown-renderer',
   template: `<markdown-renderer [markdown]="content"> </markdown-renderer>`,
 })
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ts b/tensorboard/webapp/widgets/range_input/range_input_component.ts
index be2b4ae203..f14bca8884 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_component.ts
+++ b/tensorboard/webapp/widgets/range_input/range_input_component.ts
@@ -60,6 +60,7 @@ enum Position {
  * - emits actions on range value changed
  */
 @Component({
+  standalone: false,
   selector: 'tb-range-input',
   templateUrl: './range_input_component.ng.html',
   styleUrls: ['./range_input_component.css'],
diff --git a/tensorboard/webapp/widgets/range_input/range_input_test.ts b/tensorboard/webapp/widgets/range_input/range_input_test.ts
index 80be84962e..c93dd935d5 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_test.ts
+++ b/tensorboard/webapp/widgets/range_input/range_input_test.ts
@@ -22,6 +22,7 @@ import {RangeInputComponent} from './range_input_component';
 import {RangeInputSource, RangeValues} from './types';
 
 @Component({
+  standalone: false,
   selector: 'testable-range-input',
   template: `
     <tb-range-input
diff --git a/tensorboard/webapp/widgets/resize_detector_test.ts b/tensorboard/webapp/widgets/resize_detector_test.ts
index 485fd97c07..2cf81ab9c4 100644
--- a/tensorboard/webapp/widgets/resize_detector_test.ts
+++ b/tensorboard/webapp/widgets/resize_detector_test.ts
@@ -18,6 +18,7 @@ import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {ResizeDetectorDirective} from './resize_detector_directive';
 
 @Component({
+  standalone: false,
   selector: 'testing-component',
   template: `
     <div
diff --git a/tensorboard/webapp/widgets/source_code/source_code_component.ts b/tensorboard/webapp/widgets/source_code/source_code_component.ts
index 5de1ce8f35..f5db8e3843 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_component.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_component.ts
@@ -29,6 +29,7 @@ import {
 } from './editor_options';
 
 @Component({
+  standalone: false,
   selector: 'source-code-component',
   templateUrl: './source_code_component.ng.html',
   styleUrls: ['./source_code_component.css'],
diff --git a/tensorboard/webapp/widgets/source_code/source_code_container.ts b/tensorboard/webapp/widgets/source_code/source_code_container.ts
index 1f10997c83..73491d8486 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_container.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_container.ts
@@ -30,6 +30,7 @@ import {MonacoShim} from './load_monaco_shim';
  * time.
  */
 @Component({
+  standalone: false,
   selector: 'source-code',
   template: `
     <source-code-component
diff --git a/tensorboard/webapp/widgets/source_code/source_code_container_test.ts b/tensorboard/webapp/widgets/source_code/source_code_container_test.ts
index b532358b70..d23a4151c5 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_container_test.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_container_test.ts
@@ -23,6 +23,7 @@ import {SourceCodeContainer} from './source_code_container';
 import {fakes, setUpMonacoFakes, spies, tearDownMonacoFakes} from './testing';
 
 @Component({
+  standalone: false,
   selector: 'testable-component',
   template: `
     <source-code
diff --git a/tensorboard/webapp/widgets/source_code/source_code_diff_component.ts b/tensorboard/webapp/widgets/source_code/source_code_diff_component.ts
index 35ddba0de3..2402394b3c 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_diff_component.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_diff_component.ts
@@ -28,6 +28,7 @@ import {
 } from './editor_options';
 
 @Component({
+  standalone: false,
   selector: 'source-code-diff-component',
   template: `
     <div
diff --git a/tensorboard/webapp/widgets/source_code/source_code_diff_container.ts b/tensorboard/webapp/widgets/source_code/source_code_diff_container.ts
index 949c4576df..f2d290c84a 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_diff_container.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_diff_container.ts
@@ -24,6 +24,7 @@ import {MonacoShim} from './load_monaco_shim';
  * - inline: 1 scrollable frame showing modified and original lines
  */
 @Component({
+  standalone: false,
   selector: 'source-code-diff',
   template: `
     <source-code-diff-component
diff --git a/tensorboard/webapp/widgets/source_code/source_code_diff_container_test.ts b/tensorboard/webapp/widgets/source_code/source_code_diff_container_test.ts
index 4799a4ac82..c695b65a7e 100644
--- a/tensorboard/webapp/widgets/source_code/source_code_diff_container_test.ts
+++ b/tensorboard/webapp/widgets/source_code/source_code_diff_container_test.ts
@@ -26,6 +26,7 @@ import {fakes, setUpMonacoFakes, spies, tearDownMonacoFakes} from './testing';
 
 // Does not use OnPush change detector, making it easier to test with.
 @Component({
+  standalone: false,
   selector: 'testable-component',
   template: `
     <source-code-diff [useDarkMode]="useDarkMode"></source-code-diff>
diff --git a/tensorboard/webapp/widgets/text/truncated_path_component.ts b/tensorboard/webapp/widgets/text/truncated_path_component.ts
index 3f74dc2b36..722019dbfb 100644
--- a/tensorboard/webapp/widgets/text/truncated_path_component.ts
+++ b/tensorboard/webapp/widgets/text/truncated_path_component.ts
@@ -21,6 +21,7 @@ import {Component, Input} from '@angular/core';
  * ellipsis.
  */
 @Component({
+  standalone: false,
   selector: 'tb-truncated-path',
   template: `
     <span *ngIf="firstTextPart().length > 0" class="first-text-part">{{