refactor(material/schematics): drop standalone flag from schematics

since v19 Angular components are standalone by default so we don't have to add `standalone` flag to be true explicitly in schematics
angular · Feb 3, 2025 · 680f54c · 680f54c
1 parent 6a48ffd
commit 680f54c
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 21 deletions.
diff --git a/...g-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/...g-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -14,7 +14,8 @@ import { <% if(standalone) { %>CdkDrag, CdkDropList, <% } %>CdkDragDrop, moveIte
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
   standalone: true,
-  imports: [CdkDrag, CdkDropList]<% } %>
+  imports: [CdkDrag, CdkDropList]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
   todo = [

diff --git a/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts b/src/cdk/schematics/ng-generate/drag-drop/index.spec.ts
@@ -56,6 +56,19 @@ describe('CDK drag-drop schematic', () => {
       expect(component).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic('drag-drop', {...baseOptions, standalone: false}, app);
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+
+      expect(module).toContain('DragDropModule');
+      expect(module).toContain('FooComponent');
+
+      expect(component).toContain('standalone: false');
+      expect(component).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('drag-drop', baseOptions, app);

diff --git a/...s-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/...s-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -22,15 +22,15 @@ import { FormBuilder, Validators } from '@angular/forms';
   styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
-  standalone: true,
   imports: [
     MatInputModule,
     MatButtonModule,
     MatSelectModule,
     MatRadioModule,
     MatCardModule,
     ReactiveFormsModule
-  ]<% } %>
+  ]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
   private fb = inject(FormBuilder);

diff --git a/src/material/schematics/ng-generate/address-form/index.spec.ts b/src/material/schematics/ng-generate/address-form/index.spec.ts
@@ -74,17 +74,41 @@ describe('Material address-form schematic', () => {
       });
 
       expect(module).not.toContain('FooComponent');
-      expect(content).toContain('standalone: true');
       expect(content).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic(
+        'address-form',
+        {...baseOptions, standalone: false},
+        app,
+      );
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const content = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const requiredModules = [
+        'MatInputModule',
+        'MatButtonModule',
+        'MatSelectModule',
+        'MatRadioModule',
+        'ReactiveFormsModule',
+      ];
+
+      requiredModules.forEach(name => {
+        expect(module).withContext('Module should import dependencies').toContain(name);
+        expect(content).withContext('Component should not import dependencies').not.toContain(name);
+      });
+
+      expect(content).toContain('standalone: false');
+      expect(content).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('address-form', baseOptions, app);
       const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
 
       expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
-      expect(component).toContain('standalone: true');
       expect(component).toContain('imports: [');
     });
   });

diff --git a/...hboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/...hboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -20,15 +20,15 @@ import { MatCardModule } from '@angular/material/card';<% } %>
   styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
-  standalone: true,
   imports: [
     AsyncPipe,
     MatGridListModule,
     MatMenuModule,
     MatIconModule,
     MatButtonModule,
     MatCardModule
-  ]<% } %>
+  ]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
   private breakpointObserver = inject(BreakpointObserver);

diff --git a/src/material/schematics/ng-generate/dashboard/index.spec.ts b/src/material/schematics/ng-generate/dashboard/index.spec.ts
@@ -78,10 +78,33 @@ describe('material-dashboard-schematic', () => {
       });
 
       expect(module).not.toContain('FooComponent');
-      expect(component).toContain('standalone: true');
       expect(component).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic('dashboard', {...baseOptions, standalone: false}, app);
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const requiredModules = [
+        'MatButtonModule',
+        'MatCardModule',
+        'MatGridListModule',
+        'MatIconModule',
+        'MatMenuModule',
+      ];
+
+      requiredModules.forEach(name => {
+        expect(module).withContext('Module should import dependencies').toContain(name);
+        expect(component)
+          .withContext('Component should not import dependencies')
+          .not.toContain(name);
+      });
+
+      expect(component).toContain('standalone: false');
+      expect(component).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('dashboard', baseOptions, app);
@@ -91,7 +114,6 @@ describe('material-dashboard-schematic', () => {
       );
 
       expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
-      expect(componentContent).toContain('standalone: true');
       expect(componentContent).toContain('imports: [');
     });
   });

diff --git a/...gation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/...gation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -21,15 +21,15 @@ import { map, shareReplay } from 'rxjs/operators';
   styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
-  standalone: true,
   imports: [
     MatToolbarModule,
     MatButtonModule,
     MatSidenavModule,
     MatListModule,
     MatIconModule,
     AsyncPipe,
-  ]<% } %>
+  ]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
   private breakpointObserver = inject(BreakpointObserver);

diff --git a/src/material/schematics/ng-generate/navigation/index.spec.ts b/src/material/schematics/ng-generate/navigation/index.spec.ts
@@ -89,10 +89,37 @@ describe('material-navigation-schematic', () => {
       });
 
       expect(module).not.toContain('FooComponent');
-      expect(component).toContain('standalone: true');
       expect(component).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic(
+        'navigation',
+        {...baseOptions, standalone: false},
+        app,
+      );
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const requiredModules = [
+        'MatToolbarModule',
+        'MatButtonModule',
+        'MatSidenavModule',
+        'MatListModule',
+        'MatIconModule',
+      ];
+
+      requiredModules.forEach(name => {
+        expect(module).withContext('Module should import dependencies').toContain(name);
+        expect(component)
+          .withContext('Component should not import dependencies')
+          .not.toContain(name);
+      });
+
+      expect(component).toContain('standalone: false');
+      expect(component).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('navigation', baseOptions, app);
@@ -102,7 +129,6 @@ describe('material-navigation-schematic', () => {
       );
 
       expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
-      expect(componentContent).toContain('standalone: true');
       expect(componentContent).toContain('imports: [');
     });
   });

diff --git a/.../table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/.../table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -16,8 +16,8 @@ import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%
   styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
-  standalone: true,
-  imports: [MatTableModule, MatPaginatorModule, MatSortModule]<% } %>
+  imports: [MatTableModule, MatPaginatorModule, MatSortModule]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component implements AfterViewInit {
   @ViewChild(MatPaginator) paginator!: MatPaginator;

diff --git a/src/material/schematics/ng-generate/table/index.spec.ts b/src/material/schematics/ng-generate/table/index.spec.ts
@@ -84,10 +84,27 @@ describe('material-table-schematic', () => {
       });
 
       expect(module).not.toContain('FooComponent');
-      expect(component).toContain('standalone: true');
       expect(component).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic('table', {...baseOptions, standalone: false}, app);
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const requiredModules = ['MatTableModule', 'MatPaginatorModule', 'MatSortModule'];
+
+      requiredModules.forEach(name => {
+        expect(module).withContext('Module should import dependencies').toContain(name);
+        expect(component)
+          .withContext('Component should not import dependencies')
+          .not.toContain(name);
+      });
+
+      expect(component).toContain('standalone: false');
+      expect(component).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('table', baseOptions, app);
@@ -97,7 +114,6 @@ describe('material-table-schematic', () => {
       );
 
       expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
-      expect(componentContent).toContain('standalone: true');
       expect(componentContent).toContain('imports: [');
     });
   });

diff --git a/...e/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/...e/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -35,8 +35,8 @@ export interface FlatTreeNode {
   styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
-  standalone: true,
-  imports: [MatTreeModule, MatButtonModule, MatIconModule]<% } %>
+  imports: [MatTreeModule, MatButtonModule, MatIconModule]<% } else { %>,
+  standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
 

diff --git a/src/material/schematics/ng-generate/tree/index.spec.ts b/src/material/schematics/ng-generate/tree/index.spec.ts
@@ -62,10 +62,27 @@ describe('Material tree schematic', () => {
       });
 
       expect(module).not.toContain('FooComponent');
-      expect(component).toContain('standalone: true');
       expect(component).toContain('imports: [');
     });
 
+    it('should generate a component with no imports and standalone false', async () => {
+      const app = await createTestApp(runner, {standalone: false});
+      const tree = await runner.runSchematic('tree', {...baseOptions, standalone: false}, app);
+      const module = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const requiredModules = ['MatTreeModule', 'MatButtonModule', 'MatIconModule'];
+
+      requiredModules.forEach(name => {
+        expect(module).withContext('Module should import dependencies').toContain(name);
+        expect(component)
+          .withContext('Component should not import dependencies')
+          .not.toContain(name);
+      });
+
+      expect(component).toContain('standalone: false');
+      expect(component).not.toContain('imports: [');
+    });
+
     it('should infer the standalone option from the project structure', async () => {
       const app = await createTestApp(runner, {standalone: true});
       const tree = await runner.runSchematic('tree', baseOptions, app);
@@ -75,7 +92,6 @@ describe('Material tree schematic', () => {
       );
 
       expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
-      expect(componentContent).toContain('standalone: true');
       expect(componentContent).toContain('imports: [');
     });
   });