build: completely switch dev app to standalone components (#24895)

Replaces all of the remaining `@NgModule` usages in the dev app with standalone components.

Author: crisbeto

src/dev-app/BUILD.bazel

@@ -10,7 +10,6 @@ ng_module(
     srcs = [
         "dev-app.ts",
         "main.ts",
-        "main-module.ts",
         "routes.ts",
     ],
     deps = [

src/dev-app/dev-app.ts

@@ -7,11 +7,15 @@
  */
 
 import {Component, ViewEncapsulation} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {DevAppLayout} from './dev-app/dev-app-layout';
 
 /** Root component for the dev-app demos. */
 @Component({
   selector: 'dev-app',
   template: '<dev-app-layout><router-outlet></router-outlet></dev-app-layout>',
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [DevAppLayout, RouterModule],
 })
-export class DevAppComponent {}
+export class DevApp {}

src/dev-app/dev-app/dev-app-404.ts

@@ -7,6 +7,8 @@
  */
 
 import {Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {RouterModule} from '@angular/router';
 
 @Component({
   template: `
@@ -15,5 +17,7 @@ import {Component} from '@angular/core';
     <a mat-raised-button routerLink="/">Go back to the home page</a>
   `,
   host: {'class': 'mat-typography'},
+  standalone: true,
+  imports: [MatButtonModule, RouterModule],
 })
 export class DevApp404 {}

src/dev-app/dev-app/dev-app-home.ts

@@ -14,5 +14,6 @@ import {Component} from '@angular/core';
     <p>Welcome to the development demos for Angular Material!</p>
     <p>Open the sidenav to select a demo.</p>
   `,
+  standalone: true,
 })
 export class DevAppHome {}

src/dev-app/dev-app/dev-app-layout.ts

@@ -11,7 +11,13 @@ import {ChangeDetectorRef, Component, ElementRef, Inject, ViewEncapsulation} fro
 
 import {DevAppDirectionality} from './dev-app-directionality';
 import {DevAppRippleOptions} from './ripple-options';
-import {DOCUMENT} from '@angular/common';
+import {CommonModule, DOCUMENT} from '@angular/common';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatListModule} from '@angular/material/list';
+import {MatButtonModule} from '@angular/material/button';
+import {RouterModule} from '@angular/router';
+import {MatIconModule} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
 const isDarkThemeKey = 'ANGULAR_COMPONENTS_DEV_APP_DARK_THEME';
 
@@ -23,6 +29,16 @@ export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
   templateUrl: 'dev-app-layout.html',
   styleUrls: ['dev-app-layout.css'],
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    RouterModule,
+  ],
 })
 export class DevAppLayout {
   readonly darkThemeClass = 'demo-unicorn-dark-theme';

src/dev-app/dev-app/dev-app-module.ts

@@ -7,12 +7,17 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {CommonModule} from '@angular/common';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {Component, Input} from '@angular/core';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {Example} from './example';
 
 /** Displays a set of components-examples in a mat-accordion. */
 @Component({
   selector: 'material-example-list',
+  standalone: true,
+  imports: [CommonModule, MatExpansionModule, Example],
   template: `
     <mat-accordion multi>
       <mat-expansion-panel *ngFor="let id of ids" [expanded]="expandAll">

src/dev-app/example/example-list.ts

@@ -7,6 +7,7 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {CommonModule} from '@angular/common';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {loadExample} from '@angular/components-examples/private';
 import {
@@ -20,6 +21,8 @@ import {
 
 @Component({
   selector: 'material-example',
+  standalone: true,
+  imports: [CommonModule],
   template: `
     <div class="label" *ngIf="showLabel">
       <span class="title"> {{title}} </span>

src/dev-app/example/example-module.ts

@@ -8,13 +8,13 @@
 
 import {Component} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
-import {ExampleModule} from '../example/example-module';
+import {ExampleList} from '../example/example-list';
 
 /** Renders all material examples listed in the generated EXAMPLE_COMPONENTS. */
 @Component({
   template: `<material-example-list [ids]="examples"></material-example-list>`,
   standalone: true,
-  imports: [ExampleModule],
+  imports: [ExampleList],
 })
 export class ExamplesPage {
   examples = Object.keys(EXAMPLE_COMPONENTS);

src/dev-app/example/example.ts

@@ -9,7 +9,33 @@
 // Load `$localize` for examples using it.
 import '@angular/localize/init';
 
-import {platformBrowser} from '@angular/platform-browser';
-import {MainModule} from './main-module';
+import {importProvidersFrom} from '@angular/core';
+import {HttpClientModule} from '@angular/common/http';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {bootstrapApplication} from '@angular/platform-browser';
 
-platformBrowser().bootstrapModule(MainModule);
+import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material/core';
+import {Directionality} from '@angular/cdk/bidi';
+import {OverlayContainer, FullscreenOverlayContainer} from '@angular/cdk/overlay';
+
+import {DevApp} from './dev-app';
+import {DevAppDirectionality} from './dev-app/dev-app-directionality';
+import {DevAppRippleOptions} from './dev-app/ripple-options';
+import {ANIMATIONS_STORAGE_KEY} from './dev-app/dev-app-layout';
+import {DEV_APP_ROUTES} from './routes';
+
+bootstrapApplication(DevApp, {
+  providers: [
+    importProvidersFrom(
+      BrowserAnimationsModule.withConfig({
+        disableAnimations: localStorage.getItem(ANIMATIONS_STORAGE_KEY) === 'true',
+      }),
+      RouterModule.forRoot(DEV_APP_ROUTES),
+      HttpClientModule,
+    ),
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
+    {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
+    {provide: Directionality, useClass: DevAppDirectionality},
+  ],
+});