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

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

Author: crisbeto

docs/design/analytics.md

@@ -58,6 +58,7 @@ Note: There's a limit of 20 custom dimensions.
 | 12 | `Flag: --skip-tests` | `boolean` |
 | 13 | `Flag: --aot` | `boolean` |
 | 14 | `Flag: --minimal` | `boolean` |
+| 15 | `Flag: --standalone` | `boolean` |
 | 16 | `Flag: --optimization` | `boolean` |
 | 17 | `Flag: --routing` | `boolean` |
 | 18 | `Flag: --skip-import` | `boolean` |

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

@@ -8,7 +8,7 @@ describe('<%= classify(name) %><%= classify(type) %>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ <%= classify(name) %><%= classify(type) %> ]
+      <%= standalone ? 'imports' : 'declarations' %>: [ <%= classify(name) %><%= classify(type) %> ]
     })
     .compileComponents();
 

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

@@ -39,7 +39,7 @@ function readIntoSourceFile(host: Tree, modulePath: string): ts.SourceFile {
 
 function addDeclarationToNgModule(options: ComponentOptions): Rule {
   return (host: Tree) => {
-    if (options.skipImport || !options.module) {
+    if (options.skipImport || options.standalone || !options.module) {
       return host;
     }
 

packages/schematics/angular/component/index_spec.ts

@@ -420,4 +420,22 @@ 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');
+  });
+
+  it('should declare standalone components in the `imports` of a test', async () => {
+    const options = { ...defaultOptions, standalone: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const testContent = tree.readContent('/projects/bar/src/app/foo/foo.component.spec.ts');
+    expect(testContent).toContain('imports: [ FooComponent ]');
+    expect(testContent).not.toContain('declarations');
+  });
 });

packages/schematics/angular/component/schema.json

@@ -48,6 +48,12 @@
       "alias": "t",
       "x-user-analytics": 10
     },
+    "standalone": {
+      "description": "Whether the generated component is standalone.",
+      "type": "boolean",
+      "default": false,
+      "x-user-analytics": 15
+    },
     "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

@@ -31,7 +31,7 @@ import { Schema as DirectiveOptions } from './schema';
 
 function addDeclarationToNgModule(options: DirectiveOptions): Rule {
   return (host: Tree) => {
-    if (options.skipImport || !options.module) {
+    if (options.skipImport || options.standalone || !options.module) {
       return host;
     }
 

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,12 @@
       "format": "html-selector",
       "description": "The HTML selector to use for this directive."
     },
+    "standalone": {
+      "description": "Whether the generated directive is standalone.",
+      "type": "boolean",
+      "default": false,
+      "x-user-analytics": 15
+    },
     "flat": {
       "type": "boolean",
       "description": "When true (the default), creates the new files at the top level of the current project.",