Explicitly set standalone for all Angular directives (#6922)

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.

This is a follow-up to #6912, which missed a handful of places.

tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts

@@ -48,7 +48,7 @@ import {
 } from '../types';
 import {AppRoutingEffects, TEST_ONLY} from './app_routing_effects';
 
-@Component({selector: 'test', template: '', jit: true})
+@Component({standalone: false, selector: 'test', template: '', jit: true})
 class TestableComponent {}
 
 const testAction = createAction('[TEST] test action');

tensorboard/webapp/app_routing/route_config_test.ts

@@ -19,7 +19,7 @@ import {RouteConfigs, RouteMatch} from './route_config';
 import {ConcreteRouteDef, RedirectionRouteDef} from './route_config_types';
 import {Navigation, RouteKind} from './types';
 
-@Component({selector: 'test', template: ''})
+@Component({standalone: false, selector: 'test', template: ''})
 class TestableComponent {}
 
 function buildConcreteRouteDef(override: Partial<ConcreteRouteDef>) {

tensorboard/webapp/app_routing/views/router_link_directive_container.ts

@@ -19,7 +19,10 @@ import {navigationRequested} from '../actions';
 import {AppRootProvider} from '../app_root';
 import {Location} from '../location';
 
-@Directive({selector: 'a[routerLink]'})
+@Directive({
+  standalone: false,
+  selector: 'a[routerLink]',
+})
 export class RouterLinkDirectiveContainer {
   private pathname: string | null = null;
 

tensorboard/webapp/feature_flag/directives/feature_flag_directive.ts

@@ -27,7 +27,10 @@ import {FEATURE_FLAGS_QUERY_STRING_NAME} from '../http/const';
 import {getFeatureFlagsToSendToServer} from '../store/feature_flag_selectors';
 import {State as FeatureFlagState} from '../store/feature_flag_types';
 
-@Directive({selector: 'a[includeFeatureFlags], img[includeFeatureFlags]'})
+@Directive({
+  standalone: false,
+  selector: 'a[includeFeatureFlags], img[includeFeatureFlags]',
+})
 export class FeatureFlagDirective {
   @HostBinding('attr.href') hrefAttr: string | undefined = undefined;
   @HostBinding('attr.src') srcAttr: string | undefined = undefined;

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

@@ -82,7 +82,7 @@ class TestableScrollingContainer {
 /**
  * Stub 'card-view' component for ease of testing.
  */
-@Component({selector: 'card-view'})
+@Component({standalone: false, selector: 'card-view'})
 class TestableCardView {
   @Output() fullHeightChanged = new EventEmitter<boolean>();
   @Output() fullWidthChanged = new EventEmitter<boolean>();

tensorboard/webapp/widgets/intersection_observer/intersection_observer_directive.ts

@@ -29,7 +29,10 @@ import {take, takeUntil} from 'rxjs/operators';
 /**
  * A directive that calls `onVisibilityChange` when element visiblity changes.
  */
-@Directive({selector: '[observeIntersection]'})
+@Directive({
+  standalone: false,
+  selector: '[observeIntersection]',
+})
 export class IntersectionObserverDirective implements OnInit, OnDestroy {
   @Input() intersectionObserverMargin?: string;
   @Output() onVisibilityChange = new EventEmitter<{visible: boolean}>();

tensorboard/webapp/widgets/intersection_observer/intersection_observer_testing_module.ts

@@ -16,7 +16,11 @@ import {Directive, EventEmitter, NgModule, Output} from '@angular/core';
 import {ComponentFixture} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-@Directive({selector: '[observeIntersection]', jit: true})
+@Directive({
+  standalone: false,
+  selector: '[observeIntersection]',
+  jit: true,
+})
 class IntersectionObserverTestingDirective {
   @Output() onVisibilityChange = new EventEmitter<{visible: boolean}>();
 

tensorboard/webapp/widgets/resize_detector_directive.ts

@@ -29,7 +29,10 @@ import {debounceTime, skip, takeUntil} from 'rxjs/operators';
  *
  * It does not emit `onResize` on the initial render.
  */
-@Directive({selector: '[detectResize]'})
+@Directive({
+  standalone: false,
+  selector: '[detectResize]',
+})
 export class ResizeDetectorDirective implements OnDestroy, OnInit {
   @Input() resizeEventDebouncePeriodInMs: number = 100;
   @Output() onResize = new EventEmitter<void>();

tensorboard/webapp/widgets/resize_detector_testing_module.ts

@@ -16,7 +16,10 @@ import {Directive, EventEmitter, Input, NgModule, Output} from '@angular/core';
 import {ComponentFixture} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-@Directive({selector: '[detectResize]'})
+@Directive({
+  standalone: false,
+  selector: '[detectResize]',
+})
 class ResizeDetectorTestingDirective {
   @Input() resizeEventDebouncePeriodInMs: number = 100;
   @Output() onResize = new EventEmitter<void>();