feat(@schematics/angular): add --standalone to ng generate

Adds the `--standalone` flag when generating components, directives or pipes through `ng generate`.

Author: crisbeto

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -1,7 +1,8 @@
 import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 
 @Component({<% if(!skipSelector) {%>
-  selector: '<%= selector %>',<%}%><% if(inlineTemplate) { %>
+  selector: '<%= selector %>',<%}%><% if(standalone) {%>
+  standalone: true,<%}%><% if(inlineTemplate) { %>
   template: `
     <p>
       <%= dasherize(name) %> works!

packages/schematics/angular/component/index.ts

@@ -155,7 +155,12 @@ export default function (options: ComponentOptions): Rule {
         : noop(),
       move(parsedPath.path),
     ]);
+    const rules = [mergeWith(templateSource)];
 
-    return chain([addDeclarationToNgModule(options), mergeWith(templateSource)]);
+    if (!options.standalone) {
+      rules.unshift(addDeclarationToNgModule(options));
+    }
+
+    return chain(rules);
   };
 }

packages/schematics/angular/component/index_spec.ts

@@ -420,4 +420,14 @@ describe('Component Schematic', () => {
     expect(content).toMatch(/template: `(\n(.|)*){3}\n\s*`,\n/);
     expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/);
   });
+
+  it('should create a standalone component', async () => {
+    const options = { ...defaultOptions, standalone: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const moduleContent = tree.readContent('/projects/bar/src/app/app.module.ts');
+    const componentContent = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(componentContent).toContain('standalone: true');
+    expect(componentContent).toContain('class FooComponent');
+    expect(moduleContent).not.toContain('FooComponent');
+  });
 });

packages/schematics/angular/component/schema.json

@@ -48,6 +48,13 @@
       "alias": "t",
       "x-user-analytics": 10
     },
+    "standalone": {
+      "description": "Whether the generated component is standalone.",
+      "type": "boolean",
+      "default": false,
+      "alias": "sa",
+      "x-user-analytics": 10
+    },
     "viewEncapsulation": {
       "description": "The view encapsulation strategy to use in the new component.",
       "enum": ["Emulated", "None", "ShadowDom"],

packages/schematics/angular/directive/files/__name@dasherize@if-flat__/__name@dasherize__.directive.ts.template

@@ -1,7 +1,8 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[<%= selector %>]'
+  selector: '[<%= selector %>]'<% if(standalone) {%>,
+  standalone: true<%}%>
 })
 export class <%= classify(name) %>Directive {
 

packages/schematics/angular/directive/index.ts

@@ -134,7 +134,12 @@ export default function (options: DirectiveOptions): Rule {
       }),
       move(parsedPath.path),
     ]);
+    const rules = [mergeWith(templateSource)];
 
-    return chain([addDeclarationToNgModule(options), mergeWith(templateSource)]);
+    if (!options.standalone) {
+      rules.unshift(addDeclarationToNgModule(options));
+    }
+
+    return chain(rules);
   };
 }

packages/schematics/angular/directive/index_spec.ts

@@ -183,4 +183,14 @@ describe('Directive Schematic', () => {
     expect(files).toContain('/projects/bar/src/app/foo.directive.ts');
     expect(files).not.toContain('/projects/bar/src/app/foo.directive.spec.ts');
   });
+
+  it('should create a standalone directive', async () => {
+    const options = { ...defaultOptions, standalone: true };
+    const tree = await schematicRunner.runSchematicAsync('directive', options, appTree).toPromise();
+    const moduleContent = tree.readContent('/projects/bar/src/app/app.module.ts');
+    const directiveContent = tree.readContent('/projects/bar/src/app/foo.directive.ts');
+    expect(directiveContent).toContain('standalone: true');
+    expect(directiveContent).toContain('class FooDirective');
+    expect(moduleContent).not.toContain('FooDirective');
+  });
 });

packages/schematics/angular/directive/schema.json

@@ -59,6 +59,13 @@
       "format": "html-selector",
       "description": "The HTML selector to use for this directive."
     },
+    "standalone": {
+      "description": "Whether the generated directive is standalone.",
+      "type": "boolean",
+      "default": false,
+      "alias": "sa",
+      "x-user-analytics": 10
+    },
     "flat": {
       "type": "boolean",
       "description": "When true (the default), creates the new files at the top level of the current project.",

packages/schematics/angular/pipe/files/__name@dasherize@if-flat__/__name@dasherize__.pipe.ts.template

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: '<%= camelize(name) %>'
+  name: '<%= camelize(name) %>'<% if(standalone) {%>,
+  standalone: true<%}%>
 })
 export class <%= classify(name) %>Pipe implements PipeTransform {
 

packages/schematics/angular/pipe/index.ts

@@ -111,7 +111,12 @@ export default function (options: PipeOptions): Rule {
       }),
       move(parsedPath.path),
     ]);
+    const rules = [mergeWith(templateSource)];
 
-    return chain([addDeclarationToNgModule(options), mergeWith(templateSource)]);
+    if (!options.standalone) {
+      rules.unshift(addDeclarationToNgModule(options));
+    }
+
+    return chain(rules);
   };
 }