build: remove usages of CommonModule in the dev app (#29869)

`CommonModule` was being used primarily for the control flow directives which have been replaced by the built-in control flow syntax. These changes either remove it or replace it with importing the individual symbols.
angular · Oct 13, 2024 · fe4271f · fe4271f
1 parent 371446a
commit fe4271f
Show file tree

Hide file tree

Showing 39 changed files with 34 additions and 133 deletions.
diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, ViewChild} from '@angular/core';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
@@ -36,7 +36,7 @@ type DisableStateOption = 'none' | 'first-middle-last' | 'all';
   styleUrl: 'autocomplete-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
+    JsonPipe,
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -246,7 +246,7 @@ export class AutocompleteDemo {
     }
   `,
   standalone: true,
-  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
+  imports: [FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemoExampleDialog {

diff --git a/src/dev-app/badge/badge-demo.ts b/src/dev-app/badge/badge-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule} from '@angular/material/badge';
@@ -18,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'badge-demo.html',
   styleUrl: 'badge-demo.css',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
+  imports: [FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeDemo {

diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -22,7 +21,6 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   styleUrl: 'baseline-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     MatCardModule,
     MatCheckboxModule,
     MatFormFieldModule,

diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
@@ -32,7 +31,6 @@ const defaultConfig = new MatBottomSheetConfig();
   templateUrl: 'bottom-sheet-demo.html',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatBottomSheetModule,
     MatButtonModule,
@@ -80,7 +78,7 @@ export class BottomSheetDemo {
     </mat-nav-list>
   `,
   standalone: true,
-  imports: [CommonModule, MatListModule],
+  imports: [MatListModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleBottomSheet {

diff --git a/src/dev-app/button-toggle/button-toggle-demo.ts b/src/dev-app/button-toggle/button-toggle-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
@@ -18,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'button-toggle-demo.html',
   styleUrl: 'button-toggle-demo.css',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
+  imports: [FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleDemo {

diff --git a/src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts b/src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts
@@ -7,13 +7,12 @@
  */
 
 import {CdkComboboxModule} from '@angular/cdk-experimental/combobox';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   templateUrl: 'cdk-combobox-demo.html',
   standalone: true,
-  imports: [CdkComboboxModule, CommonModule],
+  imports: [CdkComboboxModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkComboboxDemo {}
diff --git a/src/dev-app/cdk-menu/cdk-menu-demo.ts b/src/dev-app/cdk-menu/cdk-menu-demo.ts
@@ -8,7 +8,6 @@
 
 import {CdkMenuModule} from '@angular/cdk/menu';
 import {ConnectedPosition} from '@angular/cdk/overlay';
-import {CommonModule} from '@angular/common';
 import {
   CdkMenuContextExample,
   CdkMenuInlineExample,
@@ -25,7 +24,6 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
   standalone: true,
   imports: [
     CdkMenuModule,
-    CommonModule,
     CdkMenuStandaloneMenuExample,
     CdkMenuStandaloneStatefulMenuExample,
     CdkMenuMenubarExample,

diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ANIMATION_MODULE_TYPE, ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
@@ -51,7 +50,7 @@ export class AnimationsNoop {}
   `,
   templateUrl: 'nested-checklist.html',
   standalone: true,
-  imports: [CommonModule, MatCheckboxModule, FormsModule],
+  imports: [MatCheckboxModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCheckboxDemoNestedChecklist {
@@ -104,7 +103,6 @@ export class MatCheckboxDemoNestedChecklist {
   styleUrl: 'checkbox-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatCheckboxModule,
     MatInputModule,

diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts
@@ -8,7 +8,6 @@
 
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -35,7 +34,6 @@ export interface DemoColor {
   styleUrl: 'chips-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCardModule,

diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts
@@ -16,7 +16,6 @@ import {
   VerticalConnectionPos,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {CommonModule} from '@angular/common';
 import {CdkOverlayBasicExample} from '@angular/components-examples/cdk/overlay';
 import {
   ChangeDetectionStrategy,
@@ -40,7 +39,6 @@ import {MatRadioModule} from '@angular/material/radio';
   standalone: true,
   imports: [
     CdkOverlayBasicExample,
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -18,6 +17,7 @@ import {
   ViewEncapsulation,
   inject,
 } from '@angular/core';
+import {JsonPipe} from '@angular/common';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -179,7 +179,7 @@ export class CustomHeaderNgContent<D> {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
+    JsonPipe,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
@@ -32,7 +32,7 @@
     be one level above the density class in the DOM. At the same time, we want the density to apply
     to the toolbar while always keeping it in LTR at the same time.
    -->
-  <main [attr.dir]="state.direction" [ngClass]="getDensityClass()" class="demo-main">
+  <main [attr.dir]="state.direction" [class]="getDensityClass()" class="demo-main">
     <!-- The toolbar should always be in the LTR direction -->
     <mat-toolbar color="primary" dir="ltr">
       <button mat-icon-button (click)="navigation.open('mouse')">
@@ -153,7 +153,7 @@ <h1>Angular Material Demos</h1>
       </div>
     </mat-toolbar>
 
-    <div [ngClass]="getDensityClass()" class="demo-content mat-app-background">
+    <div [class]="getDensityClass()" class="demo-content mat-app-background">
       <ng-content></ng-content>
     </div>
   </main>

diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
@@ -7,7 +7,7 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {CommonModule, DOCUMENT} from '@angular/common';
+import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -37,7 +37,6 @@ import {DevAppDirectionality} from './dev-app-directionality';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    CommonModule,
     MatButtonModule,
     MatIconModule,
     MatListModule,

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
@@ -44,6 +44,7 @@ import {MatSelectModule} from '@angular/material/select';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
+    JsonPipe,
     FormsModule,
     MatButtonModule,
     MatCardModule,

diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts
@@ -17,7 +17,6 @@ import {
   Point,
   DragRef,
 } from '@angular/cdk/drag-drop';
-import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -32,7 +31,6 @@ import {MatCheckbox} from '@angular/material/checkbox';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     DragDropModule,
     FormsModule,
     MatFormFieldModule,

diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
@@ -7,7 +7,6 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {CommonModule} from '@angular/common';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {MatExpansionModule} from '@angular/material/expansion';
@@ -17,7 +16,7 @@ import {Example} from './example';
 @Component({
   selector: 'material-example-list',
   standalone: true,
-  imports: [CommonModule, MatExpansionModule, Example],
+  imports: [MatExpansionModule, Example],
   template: `
     <mat-accordion multi>
       @for (id of ids; track id) {

diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
@@ -17,14 +17,12 @@ import {
   inject,
 } from '@angular/core';
 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';
 
 @Component({
   selector: 'material-example',
   standalone: true,
-  imports: [CommonModule],
   template: `
     @if (showLabel) {
       <div class="label">

diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts
@@ -7,7 +7,6 @@
  */
 
 import {CdkAccordionModule} from '@angular/cdk/accordion';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -30,7 +29,6 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
   standalone: true,
   imports: [
     CdkAccordionModule,
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts
@@ -8,7 +8,6 @@
 
 import {A11yModule, CdkTrapFocus} from '@angular/cdk/a11y';
 import {_supportsShadowDom} from '@angular/cdk/platform';
-import {CommonModule} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -47,14 +46,7 @@ export class FocusTrapShadowDomDemo {}
   templateUrl: 'focus-trap-demo.html',
   styleUrl: 'focus-trap-demo.css',
   standalone: true,
-  imports: [
-    A11yModule,
-    CommonModule,
-    MatButtonModule,
-    MatCardModule,
-    MatToolbarModule,
-    FocusTrapShadowDomDemo,
-  ],
+  imports: [A11yModule, MatButtonModule, MatCardModule, MatToolbarModule, FocusTrapShadowDomDemo],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FocusTrapDemo implements AfterViewInit {

diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -69,7 +68,6 @@ let apiLoadingPromise: Promise<unknown> | null = null;
   styleUrl: 'google-map-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     GoogleMap,
     MapBicyclingLayer,
     MapCircle,

diff --git a/src/dev-app/grid-list/grid-list-demo.ts b/src/dev-app/grid-list/grid-list-demo.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -19,14 +18,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'grid-list-demo.html',
   styleUrl: 'grid-list-demo.css',
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatCardModule,
-    MatGridListModule,
-    MatIconModule,
-  ],
+  imports: [FormsModule, MatButtonModule, MatCardModule, MatGridListModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GridListDemo {