schema.json 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. {
  2. "$schema": "http://json-schema.org/draft-07/schema",
  3. "$id": "SchematicsAngularComponent",
  4. "title": "Angular Component Options Schema",
  5. "type": "object",
  6. "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.",
  7. "additionalProperties": false,
  8. "properties": {
  9. "path": {
  10. "type": "string",
  11. "format": "path",
  12. "$default": {
  13. "$source": "workingDirectory"
  14. },
  15. "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.",
  16. "visible": false
  17. },
  18. "project": {
  19. "type": "string",
  20. "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.",
  21. "$default": {
  22. "$source": "projectName"
  23. }
  24. },
  25. "name": {
  26. "type": "string",
  27. "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.component.ts`, `my-component.component.html`, and `my-component.component.css`.",
  28. "$default": {
  29. "$source": "argv",
  30. "index": 0
  31. },
  32. "x-prompt": "What name would you like to use for the component?"
  33. },
  34. "displayBlock": {
  35. "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.",
  36. "type": "boolean",
  37. "default": false,
  38. "alias": "b"
  39. },
  40. "inlineStyle": {
  41. "description": "Include the component's styles directly in the `component.ts` file. By default, a separate stylesheet file (e.g., `my-component.component.css`) is created.",
  42. "type": "boolean",
  43. "default": false,
  44. "alias": "s",
  45. "x-user-analytics": "ep.ng_inline_style"
  46. },
  47. "inlineTemplate": {
  48. "description": "Include the component's HTML template directly in the `component.ts` file. By default, a separate template file (e.g., `my-component.component.html`) is created.",
  49. "type": "boolean",
  50. "default": false,
  51. "alias": "t",
  52. "x-user-analytics": "ep.ng_inline_template"
  53. },
  54. "standalone": {
  55. "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.",
  56. "type": "boolean",
  57. "default": true,
  58. "x-user-analytics": "ep.ng_standalone"
  59. },
  60. "viewEncapsulation": {
  61. "description": "Sets the view encapsulation mode for the component. This determines how the component's styles are scoped and applied.",
  62. "enum": ["Emulated", "None", "ShadowDom"],
  63. "type": "string",
  64. "alias": "v"
  65. },
  66. "changeDetection": {
  67. "description": "Configures the change detection strategy for the component.",
  68. "enum": ["Default", "OnPush"],
  69. "type": "string",
  70. "default": "Default",
  71. "alias": "c"
  72. },
  73. "prefix": {
  74. "type": "string",
  75. "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`.",
  76. "alias": "p",
  77. "oneOf": [
  78. {
  79. "maxLength": 0
  80. },
  81. {
  82. "minLength": 1,
  83. "format": "html-selector"
  84. }
  85. ]
  86. },
  87. "style": {
  88. "description": "Specify the type of stylesheet to be created for the component, or `none` to skip creating a stylesheet.",
  89. "type": "string",
  90. "default": "css",
  91. "enum": ["css", "scss", "sass", "less", "none"],
  92. "x-user-analytics": "ep.ng_style"
  93. },
  94. "type": {
  95. "type": "string",
  96. "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`.",
  97. "default": "Component"
  98. },
  99. "skipTests": {
  100. "type": "boolean",
  101. "description": "Skip the generation of unit test files `spec.ts`.",
  102. "default": false
  103. },
  104. "flat": {
  105. "type": "boolean",
  106. "description": "Create the component files directly in the project's `src/app` directory instead of creating a new folder for them.",
  107. "default": false
  108. },
  109. "skipImport": {
  110. "type": "boolean",
  111. "description": "Do not automatically import the new component into its closest NgModule.",
  112. "default": false
  113. },
  114. "selector": {
  115. "type": "string",
  116. "format": "html-selector",
  117. "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`)."
  118. },
  119. "skipSelector": {
  120. "type": "boolean",
  121. "default": false,
  122. "description": "Skip the generation of an HTML selector for the component."
  123. },
  124. "module": {
  125. "type": "string",
  126. "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.",
  127. "alias": "m"
  128. },
  129. "export": {
  130. "type": "boolean",
  131. "default": false,
  132. "description": "Automatically export the component from the specified NgModule, making it accessible to other modules in the application."
  133. },
  134. "exportDefault": {
  135. "type": "boolean",
  136. "default": false,
  137. "description": "Use a default export for the component in its TypeScript file instead of a named export."
  138. }
  139. },
  140. "required": ["name", "project"]
  141. }