Updated the files.

my-app/node_modules/@schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template

@@ -0,0 +1,6 @@
+<% if(displayBlock){ if(style != 'sass') { %>:host {
+  display: block;
+}
+<% } else { %>\:host
+  display: block;
+<% }} %>

my-app/node_modules/@schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.html.template

@@ -0,0 +1 @@
+<p><%= dasherize(name) %> works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
+
+describe('<%= classify(name) %><%= classify(type) %>', () => {
+  let component: <%= classify(name) %><%= classify(type) %>;
+  let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
+
+@Component({<% if(!skipSelector) {%>
+  selector: '<%= selector %>',<%}%><% if(standalone) {%>
+  standalone: true,
+  imports: [],<%}%><% if(inlineTemplate) { %>
+  template: `
+    <p>
+      <%= dasherize(name) %> works!
+    </p>
+  `<% } else { %>
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html'<% } if(inlineStyle) { %>,
+  styles: `<% if(displayBlock){ %>
+    :host {
+      display: block;
+    }
+  <% } %>`<% } else if (style !== 'none') { %>,
+  styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= classify(name) %><%= classify(type) %> {
+
+}

my-app/node_modules/@schematics/angular/component/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Rule } from '@angular-devkit/schematics';
+import { Schema as ComponentOptions } from './schema';
+export default function (options: ComponentOptions): Rule;

my-app/node_modules/@schematics/angular/component/index.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@angular-devkit/schematics");
+const add_declaration_to_ng_module_1 = require("../utility/add-declaration-to-ng-module");
+const find_module_1 = require("../utility/find-module");
+const parse_name_1 = require("../utility/parse-name");
+const validation_1 = require("../utility/validation");
+const workspace_1 = require("../utility/workspace");
+const schema_1 = require("./schema");
+function buildSelector(options, projectPrefix) {
+    let selector = schematics_1.strings.dasherize(options.name);
+    if (options.prefix) {
+        selector = `${options.prefix}-${selector}`;
+    }
+    else if (options.prefix === undefined && projectPrefix) {
+        selector = `${projectPrefix}-${selector}`;
+    }
+    return selector;
+}
+function default_1(options) {
+    return async (host) => {
+        const workspace = await (0, workspace_1.getWorkspace)(host);
+        const project = workspace.projects.get(options.project);
+        if (!project) {
+            throw new schematics_1.SchematicsException(`Project "${options.project}" does not exist.`);
+        }
+        if (options.path === undefined) {
+            options.path = (0, workspace_1.buildDefaultPath)(project);
+        }
+        options.module = (0, find_module_1.findModuleFromOptions)(host, options);
+        const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
+        options.name = parsedPath.name;
+        options.path = parsedPath.path;
+        options.selector =
+            options.selector || buildSelector(options, (project && project.prefix) || '');
+        (0, validation_1.validateHtmlSelector)(options.selector);
+        const skipStyleFile = options.inlineStyle || options.style === schema_1.Style.None;
+        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
+            options.skipTests ? (0, schematics_1.filter)((path) => !path.endsWith('.spec.ts.template')) : (0, schematics_1.noop)(),
+            skipStyleFile ? (0, schematics_1.filter)((path) => !path.endsWith('.__style__.template')) : (0, schematics_1.noop)(),
+            options.inlineTemplate ? (0, schematics_1.filter)((path) => !path.endsWith('.html.template')) : (0, schematics_1.noop)(),
+            (0, schematics_1.applyTemplates)({
+                ...schematics_1.strings,
+                'if-flat': (s) => (options.flat ? '' : s),
+                ...options,
+            }),
+            !options.type
+                ? (0, schematics_1.forEach)(((file) => {
+                    return file.path.includes('..')
+                        ? {
+                            content: file.content,
+                            path: file.path.replace('..', '.'),
+                        }
+                        : file;
+                }))
+                : (0, schematics_1.noop)(),
+            (0, schematics_1.move)(parsedPath.path),
+        ]);
+        return (0, schematics_1.chain)([
+            (0, add_declaration_to_ng_module_1.addDeclarationToNgModule)({
+                type: 'component',
+                ...options,
+            }),
+            (0, schematics_1.mergeWith)(templateSource),
+        ]);
+    };
+}
+exports.default = default_1;

my-app/node_modules/@schematics/angular/component/schema.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Creates a new, generic component definition in the given project.
+ */
+export interface Schema {
+    /**
+     * The change detection strategy to use in the new component.
+     */
+    changeDetection?: ChangeDetection;
+    /**
+     * Specifies if the style will contain `:host { display: block; }`.
+     */
+    displayBlock?: boolean;
+    /**
+     * The declaring NgModule exports this component.
+     */
+    export?: boolean;
+    /**
+     * Create the new files at the top level of the current project.
+     */
+    flat?: boolean;
+    /**
+     * Include styles inline in the component.ts file. Only CSS styles can be included inline.
+     * By default, an external styles file is created and referenced in the component.ts file.
+     */
+    inlineStyle?: boolean;
+    /**
+     * Include template inline in the component.ts file. By default, an external template file
+     * is created and referenced in the component.ts file.
+     */
+    inlineTemplate?: boolean;
+    /**
+     * The declaring NgModule.
+     */
+    module?: string;
+    /**
+     * The name of the component.
+     */
+    name: string;
+    /**
+     * The path at which to create the component file, relative to the current workspace.
+     * Default is a folder with the same name as the component in the project root.
+     */
+    path?: string;
+    /**
+     * The prefix to apply to the generated component selector.
+     */
+    prefix?: string;
+    /**
+     * The name of the project.
+     */
+    project: string;
+    /**
+     * The HTML selector to use for this component.
+     */
+    selector?: string;
+    /**
+     * Do not import this component into the owning NgModule.
+     */
+    skipImport?: boolean;
+    /**
+     * Specifies if the component should have a selector or not.
+     */
+    skipSelector?: boolean;
+    /**
+     * Do not create "spec.ts" test files for the new component.
+     */
+    skipTests?: boolean;
+    /**
+     * Whether the generated component is standalone.
+     */
+    standalone?: boolean;
+    /**
+     * The file extension or preprocessor to use for style files, or 'none' to skip generating
+     * the style file.
+     */
+    style?: Style;
+    /**
+     * Adds a developer-defined type to the filename, in the format "name.type.ts".
+     */
+    type?: string;
+    /**
+     * The view encapsulation strategy to use in the new component.
+     */
+    viewEncapsulation?: ViewEncapsulation;
+}
+/**
+ * The change detection strategy to use in the new component.
+ */
+export declare enum ChangeDetection {
+    Default = "Default",
+    OnPush = "OnPush"
+}
+/**
+ * The file extension or preprocessor to use for style files, or 'none' to skip generating
+ * the style file.
+ */
+export declare enum Style {
+    Css = "css",
+    Less = "less",
+    None = "none",
+    Sass = "sass",
+    Scss = "scss"
+}
+/**
+ * The view encapsulation strategy to use in the new component.
+ */
+export declare enum ViewEncapsulation {
+    Emulated = "Emulated",
+    None = "None",
+    ShadowDom = "ShadowDom"
+}

my-app/node_modules/@schematics/angular/component/schema.js

@@ -0,0 +1,34 @@
+"use strict";
+// THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
+// CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewEncapsulation = exports.Style = exports.ChangeDetection = void 0;
+/**
+ * The change detection strategy to use in the new component.
+ */
+var ChangeDetection;
+(function (ChangeDetection) {
+    ChangeDetection["Default"] = "Default";
+    ChangeDetection["OnPush"] = "OnPush";
+})(ChangeDetection || (exports.ChangeDetection = ChangeDetection = {}));
+/**
+ * The file extension or preprocessor to use for style files, or 'none' to skip generating
+ * the style file.
+ */
+var Style;
+(function (Style) {
+    Style["Css"] = "css";
+    Style["Less"] = "less";
+    Style["None"] = "none";
+    Style["Sass"] = "sass";
+    Style["Scss"] = "scss";
+})(Style || (exports.Style = Style = {}));
+/**
+ * The view encapsulation strategy to use in the new component.
+ */
+var ViewEncapsulation;
+(function (ViewEncapsulation) {
+    ViewEncapsulation["Emulated"] = "Emulated";
+    ViewEncapsulation["None"] = "None";
+    ViewEncapsulation["ShadowDom"] = "ShadowDom";
+})(ViewEncapsulation || (exports.ViewEncapsulation = ViewEncapsulation = {}));

my-app/node_modules/@schematics/angular/component/schema.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SchematicsAngularComponent",
+  "title": "Angular Component Options Schema",
+  "type": "object",
+  "description": "Creates a new, generic component definition in the given project.",
+  "additionalProperties": false,
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": {
+        "$source": "workingDirectory"
+      },
+      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component?"
+    },
+    "displayBlock": {
+      "description": "Specifies if the style will contain `:host { display: block; }`.",
+      "type": "boolean",
+      "default": false,
+      "alias": "b"
+    },
+    "inlineStyle": {
+      "description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s",
+      "x-user-analytics": "ep.ng_inline_style"
+    },
+    "inlineTemplate": {
+      "description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t",
+      "x-user-analytics": "ep.ng_inline_template"
+    },
+    "standalone": {
+      "description": "Whether the generated component is standalone.",
+      "type": "boolean",
+      "default": true,
+      "x-user-analytics": "ep.ng_standalone"
+    },
+    "viewEncapsulation": {
+      "description": "The view encapsulation strategy to use in the new component.",
+      "enum": ["Emulated", "None", "ShadowDom"],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "The change detection strategy to use in the new component.",
+      "enum": ["Default", "OnPush"],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to the generated component selector.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "style": {
+      "description": "The file extension or preprocessor to use for style files, or 'none' to skip generating the style file.",
+      "type": "string",
+      "default": "css",
+      "enum": ["css", "scss", "sass", "less", "none"],
+      "x-user-analytics": "ep.ng_style"
+    },
+    "type": {
+      "type": "string",
+      "description": "Adds a developer-defined type to the filename, in the format \"name.type.ts\".",
+      "default": "Component"
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "Do not create \"spec.ts\" test files for the new component.",
+      "default": false
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Create the new files at the top level of the current project.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Do not import this component into the owning NgModule.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "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.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "The declaring NgModule exports this component."
+    }
+  },
+  "required": ["name", "project"]
+}