feat(@schematics/angular): add skipSelector property to the component generator

Fix angular#14749

Author: mgechev

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

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

packages/schematics/angular/component/index_spec.ts

@@ -325,6 +325,15 @@ describe('Component Schematic', () => {
     expect(content).toMatch(/selector: 'app-test'/);
   });
 
+  it('should respect the skipSelector option', async () => {
+    const options = { ...defaultOptions, name: 'sub/test', skipSelector: true };
+    appTree = await schematicRunner.runSchematicAsync('component', options, appTree)
+      .toPromise();
+    const content = appTree.readContent('/projects/bar/src/app/sub/test/test.component.ts');
+    expect(content).not.toMatch(/selector: 'app-test'/);
+    console.log(content);
+  });
+
   it('should respect the sourceRoot value', async () => {
     const config = JSON.parse(appTree.readContent('/angular.json'));
     config.projects.bar.sourceRoot = 'projects/bar/custom';

packages/schematics/angular/component/schema.json

@@ -116,6 +116,11 @@
       "format": "html-selector",
       "description": "The HTML selector to use for this component."
     },
+    "skipSelector": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component should have a selector or not."
+    },
     "module":  {
       "type": "string",
       "description": "The declaring NgModule.",