146 lines
6.0 KiB
JSON
Executable File
146 lines
6.0 KiB
JSON
Executable File
{
|
|
"$schema": "http://json-schema.org/draft-07/schema",
|
|
"$id": "SchematicsAngularComponent",
|
|
"title": "Angular Component Options Schema",
|
|
"type": "object",
|
|
"description": "Creates a new Angular component. Components are the basic building blocks of Angular applications. Each component consists of a TypeScript class, an HTML template, and an optional CSS stylesheet. Use this schematic to generate a new component in your project.",
|
|
"additionalProperties": false,
|
|
"properties": {
|
|
"path": {
|
|
"type": "string",
|
|
"format": "path",
|
|
"$default": {
|
|
"$source": "workingDirectory"
|
|
},
|
|
"description": "The path where the component files should be created, relative to the current workspace. If not provided, a folder with the same name as the component will be created in the project's `src/app` directory.",
|
|
"visible": false
|
|
},
|
|
"project": {
|
|
"type": "string",
|
|
"description": "The name of the project where the component should be added. If not specified, the CLI will determine the project from the current directory.",
|
|
"$default": {
|
|
"$source": "projectName"
|
|
}
|
|
},
|
|
"name": {
|
|
"type": "string",
|
|
"description": "The name for the new component. This will be used to create the component's class, template, and stylesheet files. For example, if you provide `my-component`, the files will be named `my-component.ts`, `my-component.html`, and `my-component.css`.",
|
|
"$default": {
|
|
"$source": "argv",
|
|
"index": 0
|
|
},
|
|
"x-prompt": "What name would you like to use for the component?"
|
|
},
|
|
"displayBlock": {
|
|
"description": "Adds `:host { display: block; }` to the component's stylesheet, ensuring the component renders as a block-level element. This is useful for layout purposes.",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"alias": "b"
|
|
},
|
|
"inlineStyle": {
|
|
"description": "Include the component's styles directly in the `component.ts` file. By default, a separate stylesheet file (e.g., `my-component.css`) is created.",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"alias": "s",
|
|
"x-user-analytics": "ep.ng_inline_style"
|
|
},
|
|
"inlineTemplate": {
|
|
"description": "Include the component's HTML template directly in the `component.ts` file. By default, a separate template file (e.g., `my-component.html`) is created.",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"alias": "t",
|
|
"x-user-analytics": "ep.ng_inline_template"
|
|
},
|
|
"standalone": {
|
|
"description": "Generate a standalone component. Standalone components are self-contained and don't need to be declared in an NgModule. They can be used independently or imported directly into other standalone components.",
|
|
"type": "boolean",
|
|
"default": true,
|
|
"x-user-analytics": "ep.ng_standalone"
|
|
},
|
|
"viewEncapsulation": {
|
|
"description": "Sets the view encapsulation mode for the component. This determines how the component's styles are scoped and applied.",
|
|
"enum": ["Emulated", "None", "ShadowDom"],
|
|
"type": "string",
|
|
"alias": "v"
|
|
},
|
|
"changeDetection": {
|
|
"description": "Configures the change detection strategy for the component.",
|
|
"enum": ["Default", "OnPush"],
|
|
"type": "string",
|
|
"default": "Default",
|
|
"alias": "c"
|
|
},
|
|
"prefix": {
|
|
"type": "string",
|
|
"description": "A prefix to be added to the component's selector. For example, if the prefix is `app` and the component name is `my-component`, the selector will be `app-my-component`.",
|
|
"alias": "p",
|
|
"oneOf": [
|
|
{
|
|
"maxLength": 0
|
|
},
|
|
{
|
|
"minLength": 1,
|
|
"format": "html-selector"
|
|
}
|
|
]
|
|
},
|
|
"style": {
|
|
"description": "Specify the type of stylesheet to be created for the component, or `none` to skip creating a stylesheet.",
|
|
"type": "string",
|
|
"default": "css",
|
|
"enum": ["css", "scss", "sass", "less", "none"],
|
|
"x-user-analytics": "ep.ng_style"
|
|
},
|
|
"type": {
|
|
"type": "string",
|
|
"description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`."
|
|
},
|
|
"skipTests": {
|
|
"type": "boolean",
|
|
"description": "Skip the generation of unit test files `spec.ts`.",
|
|
"default": false
|
|
},
|
|
"flat": {
|
|
"type": "boolean",
|
|
"description": "Create the component files directly in the project's `src/app` directory instead of creating a new folder for them.",
|
|
"default": false
|
|
},
|
|
"skipImport": {
|
|
"type": "boolean",
|
|
"description": "Do not automatically import the new component into its closest NgModule.",
|
|
"default": false
|
|
},
|
|
"selector": {
|
|
"type": "string",
|
|
"format": "html-selector",
|
|
"description": "The HTML selector to use for this component. If not provided, a selector will be generated based on the component name (e.g., `app-my-component`)."
|
|
},
|
|
"skipSelector": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Skip the generation of an HTML selector for the component."
|
|
},
|
|
"module": {
|
|
"type": "string",
|
|
"description": "Specify the NgModule where the component should be declared. If not provided, the CLI will attempt to find the closest NgModule in the component's path.",
|
|
"alias": "m"
|
|
},
|
|
"export": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Automatically export the component from the specified NgModule, making it accessible to other modules in the application."
|
|
},
|
|
"exportDefault": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Use a default export for the component in its TypeScript file instead of a named export."
|
|
},
|
|
"ngHtml": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Generate component template files with an '.ng.html' file extension instead of '.html'."
|
|
}
|
|
},
|
|
"required": ["name", "project"]
|
|
}
|