fix(cdk/schematics): update drag-drop schematic to support standalone

Author: crisbeto

src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,21 +1,17 @@
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <% if(!standalone) { %>waitForAsync, <% } %>ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %>
+import { DragDropModule } from '@angular/cdk/drag-drop';<% } %>
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
 
 describe('<%= classify(name) %>Component', () => {
   let component: <%= classify(name) %>Component;
-  let fixture: ComponentFixture<<%= classify(name) %>Component>;
+  let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %>
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%= classify(name) %>Component ],
-      imports: [
-        NoopAnimationsModule,
-        DragDropModule,
-      ]
+      declarations: [<%= classify(name) %>Component],
+      imports: [DragDropModule]
     }).compileComponents();
-  }));
+  }));<% } %>
 
   beforeEach(() => {
     fixture = TestBed.createComponent(<%= classify(name) %>Component);

src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,5 +1,5 @@
 import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { <% if(standalone) { %>CdkDrag, CdkDropList, <% } %>CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -9,10 +9,12 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
   styles: [`
     <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
-  `],<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>'],<% } %><% if(!!viewEncapsulation) { %>
-  encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'Default') { %>
-  changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %>
+  `]<% } else { %>
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
+  standalone: true,
+  imports: [CdkDrag, CdkDropList]<% } %>
 })
 export class <%= classify(name) %>Component {
   todo = [

src/cdk/schematics/ng-generate/drag-drop/index.spec.ts

@@ -41,6 +41,37 @@ describe('CDK drag-drop schematic', () => {
     expect(moduleContent).toContain('DragDropModule');
   });
 
+  describe('standalone option', () => {
+    it('should generate a standalone component', async () => {
+      const app = await createTestApp(runner);
+      const tree = await runner.runSchematic('drag-drop', {...baseOptions, standalone: true}, 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).not.toContain('DragDropModule');
+      expect(module).not.toContain('FooComponent');
+
+      expect(component).not.toContain('DragDropModule');
+      expect(component).toContain('standalone: true');
+      expect(component).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);
+      const component = getFileContent(tree, '/projects/material/src/app/foo/foo.component.ts');
+      const test = getFileContent(tree, '/projects/material/src/app/foo/foo.component.spec.ts');
+
+      expect(tree.exists('/projects/material/src/app/app.module.ts')).toBe(false);
+
+      expect(component).toContain('standalone: true');
+      expect(component).toContain('imports: [');
+
+      expect(test).not.toContain('TestBed.configureTestingModule');
+      expect(test).not.toContain('DragDropModule');
+    });
+  });
+
   describe('style option', () => {
     it('should respect the option value', async () => {
       const tree = await runner.runSchematic(

src/cdk/schematics/ng-generate/drag-drop/index.ts

@@ -7,7 +7,12 @@
  */
 
 import {chain, noop, Rule, Tree} from '@angular-devkit/schematics';
-import {addModuleImportToModule, buildComponent, findModuleFromOptions} from '../../utils';
+import {
+  addModuleImportToModule,
+  buildComponent,
+  findModuleFromOptions,
+  isStandaloneSchematic,
+} from '../../utils';
 import {Schema} from './schema';
 
 /** Scaffolds a new Angular component that uses the Drag and Drop module. */
@@ -29,7 +34,11 @@ export default function (options: Schema): Rule {
 /** Adds the required modules to the main module of the CLI project. */
 function addDragDropModulesToModule(options: Schema) {
   return async (host: Tree) => {
-    const modulePath = await findModuleFromOptions(host, options);
-    addModuleImportToModule(host, modulePath!, 'DragDropModule', '@angular/cdk/drag-drop');
+    const isStandalone = await isStandaloneSchematic(host, options);
+
+    if (!isStandalone) {
+      const modulePath = await findModuleFromOptions(host, options);
+      addModuleImportToModule(host, modulePath!, 'DragDropModule', '@angular/cdk/drag-drop');
+    }
   };
 }

src/cdk/schematics/ng-generate/drag-drop/schema.json

@@ -39,6 +39,10 @@
       "type": "boolean",
       "alias": "t"
     },
+    "standalone": {
+      "description": "Whether the generated component is standalone.",
+      "type": "boolean"
+    },
     "viewEncapsulation": {
       "description": "Specifies the view encapsulation strategy.",
       "enum": ["Emulated", "None"],