build: switch dev app to standalone components

Switches the dev app components to the new standalone components API which saves us a bunch of boilerplate.

Author: crisbeto

package.json

@@ -71,7 +71,7 @@
     "@angular-devkit/build-angular": "14.0.0-next.12",
     "@angular-devkit/core": "14.0.0-next.12",
     "@angular-devkit/schematics": "14.0.0-next.12",
-    "@angular/bazel": "14.0.0-next.15",
+    "@angular/bazel": "14.0.0-next.14",
     "@angular/cli": "14.0.0-next.12",
     "@angular/compiler-cli": "14.0.0-next.15",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#335aad1b04b3d95cd4cb1d719e73b93d4e90cce3",

src/dev-app/autocomplete/BUILD.bazel

@@ -16,7 +16,6 @@ ng_module(
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/forms",
-        "@npm//@angular/router",
     ],
 )
 

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

@@ -7,7 +7,13 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {FormControl, NgModel} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -25,6 +31,17 @@ export interface StateGroup {
   selector: 'autocomplete-demo',
   templateUrl: 'autocomplete-demo.html',
   styleUrls: ['autocomplete-demo.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
 })
 export class AutocompleteDemo {
   stateCtrl = new FormControl({code: 'CA', name: 'California'});

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -14,7 +14,6 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "@npm//@angular/forms",
-        "@npm//@angular/router",
     ],
 )
 

src/dev-app/badge/BUILD.bazel

@@ -7,11 +7,18 @@
  */
 
 import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'badge-demo',
   templateUrl: 'badge-demo.html',
   styleUrls: ['badge-demo.css'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
 })
 export class BadgeDemo {
   visible = true;

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

@@ -17,7 +17,6 @@ ng_module(
         "//src/material/radio",
         "//src/material/select",
         "//src/material/toolbar",
-        "@npm//@angular/router",
     ],
 )
 

src/dev-app/badge/badge-demo.ts

@@ -7,11 +7,30 @@
  */
 
 import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
   selector: 'baseline-demo',
   templateUrl: 'baseline-demo.html',
   styleUrls: ['baseline-demo.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatToolbarModule,
+  ],
 })
 export class BaselineDemo {
   name: string;

src/dev-app/baseline/BUILD.bazel

@@ -20,7 +20,6 @@ ng_module(
         "//src/material/list",
         "//src/material/select",
         "@npm//@angular/forms",
-        "@npm//@angular/router",
     ],
 )
 

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

@@ -7,18 +7,43 @@
  */
 
 import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {
   MatBottomSheet,
   MatBottomSheetConfig,
+  MatBottomSheetModule,
   MatBottomSheetRef,
 } from '@angular/material/bottom-sheet';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatSelectModule} from '@angular/material/select';
 
 const defaultConfig = new MatBottomSheetConfig();
 
 @Component({
   selector: 'bottom-sheet-demo',
   styleUrls: ['bottom-sheet-demo.css'],
   templateUrl: 'bottom-sheet-demo.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatListModule,
+  ],
 })
 export class BottomSheetDemo {
   config: MatBottomSheetConfig = {
@@ -51,6 +76,8 @@ export class BottomSheetDemo {
       </a>
     </mat-nav-list>
   `,
+  standalone: true,
+  imports: [CommonModule, MatListModule],
 })
 export class ExampleBottomSheet {
   constructor(private _bottomSheet: MatBottomSheetRef) {}

src/dev-app/baseline/baseline-demo.ts

@@ -13,7 +13,6 @@ ng_module(
         "//src/material/button-toggle",
         "//src/material/checkbox",
         "//src/material/icon",
-        "@npm//@angular/router",
     ],
 )
 

src/dev-app/bottom-sheet/BUILD.bazel

@@ -7,11 +7,18 @@
  */
 
 import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'button-toggle-demo',
   templateUrl: 'button-toggle-demo.html',
   styleUrls: ['button-toggle-demo.css'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
 })
 export class ButtonToggleDemo {
   isVertical = false;

src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts

@@ -13,7 +13,6 @@ ng_module(
         "//src/components-examples/material/button",
         "//src/material/button",
         "//src/material/icon",
-        "@npm//@angular/router",
     ],
 )