refactor(multiple): switch remaining directives to standalone (#28202)

Switches all remaining directives to standalone and updates the linter to enforce that all directives and components are standalone.

Author: crisbeto

src/cdk/menu/menu-base.ts

@@ -47,6 +47,7 @@ let nextId = 0;
     '(focusin)': 'menuStack.setHasFocus(true)',
     '(focusout)': 'menuStack.setHasFocus(false)',
   },
+  standalone: true,
 })
 export abstract class CdkMenuBase
   extends CdkMenuGroup

src/cdk/menu/menu-item-selectable.ts

@@ -15,6 +15,7 @@ import {CdkMenuItem} from './menu-item';
     '[attr.aria-checked]': '!!checked',
     '[attr.aria-disabled]': 'disabled || null',
   },
+  standalone: true,
 })
 export abstract class CdkMenuItemSelectable extends CdkMenuItem {
   /** Whether the element is checked */

src/cdk/menu/menu-trigger-base.ts

@@ -34,6 +34,7 @@ export const MENU_TRIGGER = new InjectionToken<CdkMenuTriggerBase>('cdk-menu-tri
     '[attr.aria-controls]': 'childMenu?.id',
     '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
   },
+  standalone: true,
 })
 export abstract class CdkMenuTriggerBase implements OnDestroy {
   /** The DI injector for this component. */

src/cdk/testing/tests/index.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './test-components-module';
 export * from './test-main-component';
 export * from './test-sub-component';
 export * from './test-shadow-boundary';

src/cdk/testing/tests/test-components-module.ts

@@ -8,7 +8,7 @@
 
 import {ENTER} from '@angular/cdk/keycodes';
 import {_supportsShadowDom} from '@angular/cdk/platform';
-import {FormControl} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -19,12 +19,16 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import {TestShadowBoundary} from './test-shadow-boundary';
+import {TestSubComponent} from './test-sub-component';
 
 @Component({
   selector: 'test-main',
   templateUrl: 'test-main-component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TestShadowBoundary, TestSubComponent, FormsModule, ReactiveFormsModule],
 })
 export class TestMainComponent implements OnDestroy {
   username: string;
@@ -54,7 +58,10 @@ export class TestMainComponent implements OnDestroy {
 
   private _fakeOverlayElement: HTMLElement;
 
-  constructor(private _cdr: ChangeDetectorRef, private _zone: NgZone) {
+  constructor(
+    private _cdr: ChangeDetectorRef,
+    private _zone: NgZone,
+  ) {
     this.username = 'Yi';
     this.counter = 0;
     this.asyncCounter = 0;

src/cdk/testing/tests/test-main-component.ts

@@ -9,22 +9,25 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
-  selector: 'test-shadow-boundary',
-  template: `
-    <div class="in-the-shadows">Shadow 1</div>
-    <test-sub-shadow-boundary></test-sub-shadow-boundary>
-  `,
+  selector: 'test-sub-shadow-boundary',
+  template: '<div class="in-the-shadows">Shadow 2</div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:validate-decorators
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
-export class TestShadowBoundary {}
+export class TestSubShadowBoundary {}
 
 @Component({
-  selector: 'test-sub-shadow-boundary',
-  template: '<div class="in-the-shadows">Shadow 2</div>',
+  selector: 'test-shadow-boundary',
+  template: `
+    <div class="in-the-shadows">Shadow 1</div>
+    <test-sub-shadow-boundary></test-sub-shadow-boundary>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:validate-decorators
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
+  imports: [TestSubShadowBoundary],
 })
-export class TestSubShadowBoundary {}
+export class TestShadowBoundary {}

src/cdk/testing/tests/test-shadow-boundary.ts

@@ -19,6 +19,7 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
       </ul>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class TestSubComponent {
   @Input() title: string;

src/cdk/testing/tests/test-sub-component.ts

@@ -6,14 +6,12 @@ import {querySelectorAll as piercingQuerySelectorAll} from 'kagekiri';
 import {crossEnvironmentSpecs} from './cross-environment.spec';
 import {FakeOverlayHarness} from './harnesses/fake-overlay-harness';
 import {MainComponentHarness} from './harnesses/main-component-harness';
-import {TestComponentsModule} from './test-components-module';
 import {TestMainComponent} from './test-main-component';
 
 describe('TestbedHarnessEnvironment', () => {
   let fixture: ComponentFixture<{}>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({imports: [TestComponentsModule]}).compileComponents();
+  beforeEach(() => {
     fixture = TestBed.createComponent(TestMainComponent);
   });
 
@@ -38,9 +36,10 @@ describe('TestbedHarnessEnvironment', () => {
       });
 
       it('should be able to load harness through document root loader', async () => {
-        const documentRootHarnesses = await TestbedHarnessEnvironment.documentRootLoader(
-          fixture,
-        ).getAllHarnesses(FakeOverlayHarness);
+        const documentRootHarnesses =
+          await TestbedHarnessEnvironment.documentRootLoader(fixture).getAllHarnesses(
+            FakeOverlayHarness,
+          );
         const fixtureHarnesses = await loader.getAllHarnesses(FakeOverlayHarness);
         expect(fixtureHarnesses.length).toBe(0);
         expect(documentRootHarnesses.length).toBe(1);

src/cdk/testing/tests/testbed.spec.ts

@@ -1,12 +1,12 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {TestComponentsModule} from '@angular/cdk/testing/tests';
+import {TestMainComponent} from '@angular/cdk/testing/tests';
 
 @Component({
   selector: 'component-harness-e2e',
   template: `<test-main></test-main>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [TestComponentsModule],
+  imports: [TestMainComponent],
 })
 export class ComponentHarnessE2e {}