refactor(devtools): migrate to standalone (angular#53998)

Migrated with the schematics and cleanup by hand.

PR Close angular#53998

devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts

@@ -6,11 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {Component, Inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
 
 export interface DialogData {
   animal: string;
@@ -20,7 +19,7 @@ export interface DialogData {
 @Component({
   selector: 'app-dialog',
   standalone: true,
-  imports: [MatDialogModule, MatFormFieldModule, FormsModule],
+  imports: [MatDialogModule, MatFormField, MatLabel, FormsModule],
   template: `
     <h1 mat-dialog-title>Hi {{ data.name }}</h1>
     <div mat-dialog-content>

devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
@@ -19,14 +18,7 @@ import {DialogComponent} from './dialog.component';
 @Component({
   selector: 'app-todo-demo',
   standalone: true,
-  imports: [
-    RouterLink,
-    RouterOutlet,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-  ],
+  imports: [RouterLink, RouterOutlet, MatDialogModule, FormsModule],
   styles: [
     `
       nav {

devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts

@@ -7,14 +7,14 @@
  */
 
 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {DevToolsModule as NgDevToolsModule} from 'ng-devtools';
 import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol';
 
 import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
+import {DevToolsComponent} from 'ng-devtools';
 
 @Component({
   standalone: true,
-  imports: [NgDevToolsModule],
+  imports: [DevToolsComponent],
   providers: [
     {
       provide: MessageBus,
@@ -51,7 +51,7 @@ import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
     </div>
   `,
 })
-export class DevToolsComponent {
+export class DemoDevToolsComponent {
   messageBus: IFrameMessageBus | null = null;
   @ViewChild('ref') iframe!: ElementRef;
 }

devtools/projects/demo-standalone/src/main.ts

@@ -23,7 +23,7 @@ bootstrapApplication(AppComponent, {
       {
         path: '',
         loadComponent: () =>
-          import('./app/devtools-app/devtools-app.component').then((m) => m.DevToolsComponent),
+          import('./app/devtools-app/devtools-app.component').then((m) => m.DemoDevToolsComponent),
         pathMatch: 'full',
       },
       {

devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
     name = "devtools-tabs",
     srcs = [
         "devtools-tabs.component.ts",
-        "devtools-tabs.module.ts",
     ],
     angular_assets = [
         "devtools-tabs.component.html",

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts

@@ -6,15 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {MatTabNav} from '@angular/material/tabs';
+import {MatIcon} from '@angular/material/icon';
+import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
+import {MatSlideToggle} from '@angular/material/slide-toggle';
+import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
+import {MatTooltip} from '@angular/material/tooltip';
 import {Events, MessageBus, Route} from 'protocol';
 
 import {ApplicationEnvironment} from '../application-environment/index';
 import {Theme, ThemeService} from '../theme-service';
 
 import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
+import {InjectorTreeComponent} from './injector-tree/injector-tree.component';
+import {ProfilerComponent} from './profiler/profiler.component';
+import {RouterTreeComponent} from './router-tree/router-tree.component';
 import {TabUpdate} from './tab-update/index';
 
 type Tabs = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
@@ -23,6 +30,23 @@ type Tabs = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
   selector: 'ng-devtools-tabs',
   templateUrl: './devtools-tabs.component.html',
   styleUrls: ['./devtools-tabs.component.scss'],
+  standalone: true,
+  imports: [
+    MatTabNav,
+    MatTabNavPanel,
+    MatTooltip,
+    MatIcon,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    MatTabLink,
+    DirectiveExplorerComponent,
+    ProfilerComponent,
+    RouterTreeComponent,
+    InjectorTreeComponent,
+    MatSlideToggle,
+  ],
+  providers: [TabUpdate],
 })
 export class DevToolsTabsComponent implements OnInit, AfterViewInit {
   @Input() angularVersion: string | undefined = undefined;

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts

@@ -9,20 +9,22 @@
 import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {MatMenuModule} from '@angular/material/menu';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTooltip} from '@angular/material/tooltip';
 import {Events, MessageBus} from 'protocol';
 import {Subject} from 'rxjs';
 
-import {ApplicationEnvironment} from '../application-environment/index';
+import {ApplicationEnvironment} from '../application-environment';
 import {Theme, ThemeService} from '../theme-service';
 
 import {DevToolsTabsComponent} from './devtools-tabs.component';
-import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
 import {TabUpdate} from './tab-update/index';
+import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
 
 @Component({
   selector: 'ng-directive-explorer',
   template: '',
+  standalone: true,
+  imports: [MatTooltip, MatMenuModule],
 })
 export class MockDirectiveExplorerComponent {}
 
@@ -35,14 +37,16 @@ describe('DevtoolsTabsComponent', () => {
     messageBusMock = jasmine.createSpyObj('messageBus', ['on', 'once', 'emit', 'destroy']);
     applicationEnvironmentMock = jasmine.createSpyObj('applicationEnvironment', ['environment']);
     TestBed.configureTestingModule({
-      declarations: [DevToolsTabsComponent, MockDirectiveExplorerComponent],
-      imports: [MatTooltipModule, MatMenuModule],
+      imports: [MatTooltip, MatMenuModule, DevToolsTabsComponent],
       providers: [
         TabUpdate,
         {provide: ThemeService, useFactory: () => ({currentTheme: new Subject<Theme>()})},
         {provide: MessageBus, useValue: messageBusMock},
         {provide: ApplicationEnvironment, useValue: applicationEnvironmentMock},
       ],
+    }).overrideComponent(DevToolsTabsComponent, {
+      remove: {imports: [DirectiveExplorerComponent]},
+      add: {imports: [MockDirectiveExplorerComponent]},
     });
 
     const fixture = TestBed.createComponent(DevToolsTabsComponent);

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
     name = "directive-explorer",
     srcs = [
         "directive-explorer.component.ts",
-        "directive-explorer.module.ts",
     ],
     angular_assets = [
         "directive-explorer.component.html",

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

@@ -42,6 +42,8 @@ import {
   ElementPropertyResolver,
   FlatNode as PropertyFlatNode,
 } from './property-resolver/element-property-resolver';
+import {PropertyTabComponent} from './property-tab/property-tab.component';
+import {SplitAreaDirective} from '../../vendor/angular-split/lib/component/splitArea.directive';
 
 const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
   if ((a.component && !b.component) || (!a.component && b.component)) {
@@ -69,6 +71,14 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
       useClass: ElementPropertyResolver,
     },
   ],
+  standalone: true,
+  imports: [
+    SplitComponent,
+    SplitAreaDirective,
+    DirectiveForestComponent,
+    BreadcrumbsComponent,
+    PropertyTabComponent,
+  ],
 })
 export class DirectiveExplorerComponent implements OnInit, OnDestroy {
   @Input() showCommentNodes = false;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel

@@ -12,7 +12,6 @@ ng_module(
     name = "directive-forest",
     srcs = [
         "directive-forest.component.ts",
-        "directive-forest.module.ts",
         "directive-forest-utils.ts",
     ],
     angular_assets = [

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel

@@ -12,7 +12,6 @@ ng_module(
     name = "breadcrumbs",
     srcs = [
         "breadcrumbs.component.ts",
-        "breadcrumbs.module.ts",
     ],
     angular_assets = [
         "breadcrumbs.component.html",

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts

@@ -22,11 +22,16 @@ import {Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
 import {FlatNode} from '../component-data-source';
+import {MatButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {MatCard} from '@angular/material/card';
 
 @Component({
   selector: 'ng-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.scss'],
+  standalone: true,
+  imports: [MatCard, MatIcon, MatButton],
 })
 export class BreadcrumbsComponent implements OnInit, AfterViewInit, OnChanges {
   @Input({required: true}) parents!: FlatNode[];