├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── 1_bug_report.md │ ├── 2_imports.md │ └── config.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── TROUBLESHOOTING.md ├── angular-schematics-demo-20191025.gif └── walkthroughs ├── advancedOptions.md ├── advancedSchematics.md ├── configuration.md ├── customSchematics.md ├── documentation.md ├── firstGeneration.md ├── legacy.md ├── predefinedPaths.md ├── pro ├── advancedOptions.md ├── advancedSchematics.md ├── configuration.md ├── customSchematics.md ├── documentation.md ├── firstGeneration.md ├── legacy.md ├── predefinedPaths.md ├── testing.md └── troubleshooting.md ├── testing.md └── troubleshooting.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: cyrilletuzi 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1_bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report for a bug 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | Hi, 13 | 14 | # Checks before posting an issue 15 | 16 | - [ ] I have read _all_ the documentation included in the extension itself as a walkthrough, including the [troubleshooting guide](https://github.com/cyrilletuzi/vscode-angular-schematics/blob/main/TROUBLESHOOTING.md) (from the VS Code menu: View > Command Palette >search "Documentation" > choose "Angular Schematics: Documentation and tutorial") 17 | - [ ] I have checked in already: 18 | - [opened issues](https://github.com/cyrilletuzi/vscode-angular-schematics/issues) 19 | - [closed issues](https://github.com/cyrilletuzi/vscode-angular-schematics/issues?q=is%3Aissue+is%3Aclosed) 20 | - [questions answered](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions/categories/q-a?discussions_q=category%3AQ%26A+) in the new "Discussions" tab 21 | - [ ] My project meets the requirements indicated in README 22 | - [ ] My workspace is in [trusted mode](https://code.visualstudio.com/docs/editor/workspace-trust), not restricted mode 23 | - [ ] I looked at the extension's logs ("Angular Schematics" Output channel, second tab left to the Terminal), and tried to fix my project's configuration accordingly 24 | - [ ] I understand I am writing to a *human being* 25 | - [ ] I will be involved in my own issue, by answering questions and informing if the issue is resolved 26 | 27 | 28 | 29 | # Configuration 30 | 31 | - VS Code version (only the last 2 versions are supported): 32 | - Extension version: 33 | - OS: 34 | - Are you using VS Code in normal mode or in a special mode (web version, WSL, SSH/remote, etc.): 35 | 36 | # Description of the issue 37 | 38 | 39 | 40 | # Extension logs 41 | 42 | 44 | 45 | ``` 46 | Copy the result here 47 | ``` 48 | 49 | # How to reproduce the issue 50 | 51 | 52 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2_imports.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New standalone import 3 | about: Ask a new import to be added in the list for standalone components 4 | title: 'New standalone import: ' 5 | labels: ["pro-edition", "standalone-import"] 6 | assignees: '' 7 | 8 | --- 9 | 10 | Hi, thank you for using the Pro edition! 11 | 12 | For one or more imports to be added in the standalone components imports picker of the Pro edition, please provide the following for each import: 13 | - name: 14 | - package: 15 | - import path: 16 | - version: 17 | 18 | 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: New schematic and feature requests 4 | url: https://github.com/cyrilletuzi/vscode-angular-schematics/discussions/categories/ideas 5 | about: Feature requests must be posted and discussed first in the new GitHub "Discussions" tab, in "Ideas" category. 6 | - name: Questions and support 7 | url: https://github.com/cyrilletuzi/vscode-angular-schematics/discussions/categories/q-a 8 | about: The issue tracker is not intended for support. A GitHub "Discussions" tab, with a Questions & Answers category, is available for that purpose. 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [6.23.0] - 2024-12-27 4 | 5 | In the Pro edition, you can now enable automatic classes prefixes, for example to generate `MatButtonComponent` instead of `ButtonComponent` (given "mat" is set as the selector prefix). It is useful when doing a library of components. 6 | 7 | As usual, use the configuration helper to set this option. 8 | 9 | ## [6.22.0] - 2024-12-26 10 | 11 | In the Pro edition, you can now disable automatic classes suffixes, for example to generate `SomeButton` instead of `SomeButtonComponent`, or `SomeApiClient` instead of `SomeApiClientService`. 12 | 13 | This option allows to partly align with the upcoming [new Angular style guide](https://gist.github.com/jelbourn/0158b02cfb426e69c172db4ec92e3c0c), being discussed in [this RFC](https://github.com/angular/angular/discussions/58412). 14 | 15 | It has also been the standard in some design systems libraries since always, like Angular Material itself (it is `MatButton`, not `MatButtonComponent`). 16 | 17 | As usual, use the configuration helper to set this option. 18 | 19 | ## [6.21.0] - 2024-12-11 20 | 21 | Add the following imports in the Pro edition: 22 | - AG Grid (module and standalone) 23 | - AG Charts (module and standalone) 24 | 25 | ## [6.20.0] - 2024-12-10 26 | 27 | Add the following imports in the Pro edition: 28 | - ngx-translate v16 standalone directive and pipe 29 | - ng-select v13.7 standalone component 30 | - all ngx-bootstrap v18.1 standalone components and directives 31 | - all Kendo v16.6 standalone components and directives 32 | - ngxs/form-plugin v18 standalone directive 33 | - ng2-chart v6 standalone directive 34 | - ngx-highlightjs v10 standalone directives 35 | - ngx-quill v21 standalone components 36 | 37 | ## [6.19.0] - 2024-12-08 38 | 39 | Add the following imports in the Pro edition: 40 | - Angular Material v19 `MatTimepicker` (and related) 41 | - Ionic v8 `IonInputPasswordToggle` 42 | - all PrimeNG v18 standalone components and directives 43 | - PrimeNG v17.12 `InputOtpModule`, `StepperModule` 44 | - PrimeNG v17.9 `MeterGroupModule`, `FloatLabelModule`, `InputIconModule`, `IconFieldModule` 45 | - PrimeNG v17.0 `InputGroupModule`, `InputGroupAddonModule` 46 | - all NG-Zorro v17.1 standalone components and directives 47 | 48 | ## [6.18.0] - 2024-11-17 49 | 50 | - Support for standalone components being the default in Angular 19. 51 | - Remove the default `CommonModule` import in standalone components in the free edition. 52 | 53 | ## [6.17.0] - 2024-10-23 54 | 55 | Preparation for standalone components being the default in Angular 19. 56 | 57 | ## [6.16.0] - 2024-10-13 58 | 59 | - Alternative way to access the documentation in alternative editors like Cursor which do no support the VS Code "walkthrough" feature. 60 | 61 | ## [6.15.1] - 2024-09-28 62 | 63 | - In the Pro edition, fix a case where prefix is not asked when creating a custom schematic, resulting in an inadequate schematic id like `-component`. 64 | - In the Pro edition, fix a case where custom schematics' file names were incorrect, like `some-name..component.ts`, when suffix is empty. 65 | 66 | ## [6.15.0] - 2024-09-27 67 | 68 | In the Pro edition, simplify the Angular Material schematic, and promote it to stable. 69 | 70 | ## [6.14.0] - 2024-09-27 71 | 72 | ### Features 73 | 74 | - Preparation for standalone components being the default in Angular 19. 75 | - VS Code >= 1.92 is now required. The extension may still work in older versions, but they are not tested anymore. 76 | 77 | ### Bug fix 78 | 79 | - Fixes an issue which was breaking the "Create a custom schematic" button in the Pro edition, and the generation from the Command Palette. 80 | 81 | ## [6.13.0] - 2024-08-07 82 | 83 | New schematics for Angular Material in the Pro edition: 84 | - type safe dialog, 85 | - type safe table. 86 | 87 | The Angular Material table schematic is in beta for now, because it uses Angular features like input signals which are still in developer preview. Feedback is welcome on GitHub Discussions about this schematic. 88 | 89 | ## [6.12.0] - 2024-08-05 90 | 91 | New schematic for routes in the Pro edition. Note that: 92 | - they are lazy-loaded by default, but you can use the configuration helper to use eager-loading instead 93 | - as a consequence, legacy schematic for routes with NgModule has been renamed from `angular-module-routing` to `angular-routes` 94 | 95 | ## [6.11.2] - 2024-08-03 96 | 97 | 1 million installations celebration! If you did not try the Pro edition yet, now is the time. 98 | 99 | ## [6.10.0] - 2024-08-01 100 | 101 | VS Code >= 1.90 is now required. The extension may still work in older versions, but they are not tested anymore. 102 | 103 | In the Pro edition, default schematics options now support Angular CLI monorepos, they can be configured per-Angular project. As usual, use the configuration helper. 104 | 105 | ## [6.9.0] - 2024-02-02 106 | 107 | When generating a standalone component: 108 | - imports list now includes Ionic standalone components and directives for projects using Ionic Angular >= 7.5 ([official documentation here](https://ionicframework.com/docs/angular/build-options#standalone)) 109 | 110 | ## [6.8.0] - 2024-02-02 111 | 112 | When generating a standalone component: 113 | - imports list now includes Material standalone components and directives for projects using Material >= 17.1 (note it was a very tedious manual and error-prone work, if you think some component or directive is missing or erroneous, please file an issue on GitHub) 114 | - imports list is sorted better 115 | 116 | ## [6.7.0] - 2024-01-02 117 | 118 | Add Kendo Angular modules in imports list when generating a standalone component. 119 | 120 | ## [6.6.0] - 2023-12-08 121 | 122 | "Copy angular.json settings" in the configuration helper now takes into account settings from some alternative schematics (like `@ionic/angular-toolkit`). 123 | 124 | ## [6.5.0] - 2023-12-07 125 | 126 | angular.json configuration management has been enhanced: 127 | - angular.json in a subfolder is now supported 128 | - rely on `sourcePath`, as not all projects respect the `app` or `lib` source subfolder 129 | 130 | It means: 131 | - "Copy angular.json settings" in the configuration helper now works in more scenarios 132 | - "Limited generation" warning should happen less frequently and only when relevant 133 | 134 | ## [6.4.0] - 2023-12-05 135 | 136 | Added back `sass` and `less` values for `style` option of component and page schematics. It will also be picked when using "Copy settings from angular.json" in the configuration helper. 137 | 138 | ## [6.3.2] - 2023-12-04 139 | 140 | Look for package.json in nested subfolders too. It fixes the "No schematic match this project" error in projects where the front-end app is in a sub-sub-folder, like ASP.NET projects. 141 | 142 | ## [6.3.0] - 2023-11-29 143 | 144 | Added `skipStyle` option for component and page schematics, which can be useful if your project uses Tailwind CSS. 145 | 146 | It can be set in a click with the configuration helper, accessible from the Angular logo in the left sidebar. 147 | 148 | ## [6.2.3] - 2023-11-29 149 | 150 | Fixes a bug in component with NgModule schematic where `skipChangeDetectionOnPush` was not honored. 151 | 152 | ## [6.2.0] - 2023-11-20 153 | 154 | In addition to Material, PrimeNg and Ionic, a lot of third-party libraries have been to the standalone components imports picker in the Pro edition: 155 | - @ngx-translate/core 156 | - @ng-select/ng-select 157 | - @ng-bootstrap/ng-bootstrap 158 | - ngx-bootstrap 159 | - @asymmetrik/ngx-leaflet 160 | - @ngxs/form-plugin 161 | - angular-gridster2 162 | - highcharts-angular 163 | - ng-zorro-antd 164 | - ng2-charts 165 | - ng2-dragula 166 | - ng2-file-upload 167 | - ngx-clipboard 168 | - ngx-color-picker 169 | - ngx-countdown 170 | - ngx-echarts 171 | - ngx-file-drop 172 | - ngx-highlightjs 173 | - ngx-infinite-scroll 174 | - ngx-pagination 175 | - ngx-quill 176 | - ngx-spinner 177 | 178 | No preferences here, I just found a list of the most installed Angular libraries, and added the ones that are still maintained and with an understandable documentation. If your favorite library is missing, just ask in [GitHub issues](https://github.com/cyrilletuzi/vscode-angular-schematics/issues/new/choose), with the "Pro edition - New standalone import" form. 179 | 180 | ## [6.1.0] - 2023-11-19 181 | 182 | In Angular >= 17 projects, components styles have been simplified as a string instead of an array. If you want to stick to array styles, a `stylesArray` option has been added to component and page schematics. 183 | 184 | ## [6.0.8] - 2023-11-19 185 | 186 | Better Pro edition onboarding: 187 | - places with "Try the Pro edition" are cleaned up once your license is activated 188 | - a "Create a custom schematic" button has been added in the sidebar panel, accessible from the Angular logo in the left sidebar 189 | 190 | ## [6.0.7] - 2023-11-17 191 | 192 | Fixes: 193 | - a VS Code issue where the custom schematic creation command would fail in multi-workspaces projects 194 | - standalone components imports picker not showing in projects without a valid `angular.json` 195 | - some Pro edition features (like standalone components imports picker) still locked despite having activated a license 196 | 197 | ## [6.0.0] - 2023-11-16 198 | 199 | Last week was the Angular renaissance, what about a renaissance of this extension? This is a major update and the beginning of a new journey. 200 | 201 | ### Angular CLI is dead, long live Angular CLI 202 | 203 | The previous versions of this extension were a graphical interface to avoid to manually type command lines. But in the end, it was still an Angular CLI command that was automatically launched in the terminal. 204 | 205 | Now, this extension has its own code generator, completely baked into Visual Studio Code. It means that several of your most frequent requests are now solved: 206 | - installing Angular CLI globally is no longer needed 207 | - having `@schematics/angular` dependencies in the project `node_modules` is no longer needed 208 | - alternate package managers fantasies do not get in the way anymore 209 | - terminal nightmare ends: no more shells, configurations or permissions issues 210 | - `angular.json`, while still recommended, is no longer needed 211 | 212 | Also, it is faster. 213 | 214 | ### Opinionated schematics defaults 215 | 216 | Another big consequence is that the extension schematics no longer have to follow what the Angular CLI does. This extension aims to be a tool for Angular professionals, and so the defauts are now the ones my 8 years of teaching and coding with Angular have proven to be the best. 217 | 218 | The main differences you will notice are: 219 | - inline HTML template by default 220 | - change detection optimization (`OnPush`) by default 221 | - `:host { display: block; }` by default in pure components 222 | - no spec file by default 223 | 224 | ### Configuration helper 225 | 226 | But fear not: these are just the defaults and everything can be customized. **A lot of effort has been put in a configuration helper where you can change the settings in just a click.** 227 | 228 | Also, for its own sake, the extension now uses its own configuration. But you can use the same configuration helper to copy settings from angular.json, especially: 229 | - enable SCSS styles 230 | - enable single file components 231 | 232 | ### Documentation 233 | 234 | A lot of effort has also been put in a whole new documentation, accessible directly inside Visual Studio Code. Please take a few minutes to read it. You can access it at any time from the Angular logo on the left sidebar, or in the VS Code menu: 235 | 1. View 236 | 2. Command Palette 237 | 3. search "Documentation" 238 | 4. choose "Angular Schematics: Documentation and tutorial" 239 | 240 | ### 💎 Pro edition 241 | 242 | While this extension is very popular, with nearly 1 million installations, it is *not* a tool developed by the Angular team or affiliated to Google in any way. 243 | 244 | It is months of *unpaid* work by a single contributor. 245 | 246 | So you will see some new features marked with a diamond 💎. It means they are only available in the Pro edition. 247 | 248 | Feel free to enjoy advanced features and support a contributor at the same time! 💖 249 | 250 | - additional schematics (page, reactive services, unit tests,...) 251 | - advanced options (imports for standalone components, entry files exports,...) 252 | - legacy schematics (components with NgModules, class guards,...) 253 | - custom schematics in a much simpler way than with the Angular CLI 254 | - predefined paths to enforce an architecture 255 | 256 | You will find details about all these features directly in the extension documention. 257 | 258 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/angular-renaissance)** 💎 259 | 260 | And to celebrate the Angular renaissance, price is currently 50% off. 🎉 261 | 262 | ## [5.4.0] - 2023-05-11 263 | 264 | ## [5.3.0] - 2023-03-20 265 | 266 | ## [5.2.0] - 2022-05-03 267 | 268 | ## [5.1.0] - 2021-11-18 269 | 270 | ## [5.0.1] - 2021-10-05 271 | 272 | ## [5.0.0] - 2021-08-23 273 | 274 | ## [4.12.0] - 2021-03-17 275 | 276 | ## [4.10.1] - 2021-02-09 277 | 278 | ## [4.10.0] - 2021-02-08 279 | 280 | ## [4.9.0] - 2021-02-07 281 | 282 | ## [4.8.0] - 2021-01-03 283 | 284 | ## [4.7.0] - 2020-12-07 285 | 286 | ## [4.6.1] - 2020-11-13 287 | 288 | ## [4.6.0] - 2020-11-05 289 | 290 | ## [4.5.0] - 2020-10-05 291 | 292 | ## [4.3.0] - 2020-06-12 293 | 294 | ## [4.2.0] - 2020-06-12 295 | 296 | ## [4.1.0] - 2020-05-26 297 | 298 | ## [4.0.5] - 2020-05-08 299 | 300 | ## [4.0.4] - 2020-05-04 301 | 302 | ## [4.0.3] - 2020-04-16 303 | 304 | ## [4.0.1] - 2020-04-14 305 | 306 | ## [4.0.0] - 2020-04-13 307 | 308 | ## [3.3.1] - 2020-03-19 309 | 310 | ## [3.3.0] - 2020-02-20 311 | 312 | ## [3.1.0] - 2020-02-15 313 | 314 | ## [3.0.0] - 2020-01-02 315 | 316 | ## [2.3.2] - 2019-12-23 317 | 318 | ## [2.3.1] - 2019-12-2O 319 | 320 | ## [2.2.2] - 2019-12-10 321 | 322 | ## [2.2.1] - 2019-12-06 323 | 324 | ## [2.2.0] - 2019-11-03 325 | 326 | ## [2.1.0] - 2019-10-22 327 | 328 | ## [2.0.0] - 2019-10-21 329 | 330 | ## [1.27.0] - 2019-09-08 331 | 332 | ## [1.23.0] - 2019-03-19 333 | 334 | ## [1.22.0] - 2019-03-04 335 | 336 | ## [1.21.0] - 2019-03-04 337 | 338 | ## [1.18.0] - 2019-02-23 339 | 340 | ## [1.17.0] - 2019-02-16 341 | 342 | ## [1.16.0] - 2019-02-03 343 | 344 | ## [1.13.0] - 2019-02-02 345 | 346 | ## [1.12.2] - 2019-01-29 347 | 348 | ## [1.12.1] - 2019-01-16 349 | 350 | ## [1.11.4] - 2019-01-12 351 | 352 | ## [1.11.3] - 2018-12-27 353 | 354 | ## [1.8.1] - 2018-09-25 355 | 356 | ## [1.7.0] - 2018-09-22 357 | 358 | ## [1.6.2] - 2018-09-06 359 | 360 | ## [1.6.0] - 2018-08-29 361 | 362 | ## [1.5.0] - 2018-07-26 363 | 364 | ## [1.4.0] - 2018-07-25 365 | 366 | ## [1.3.1] - 2018-07-20 367 | 368 | ## [1.3.0] - 2018-06-29 369 | 370 | ## [1.2.0] - 2018-06-24 371 | 372 | ## [1.0.1] - 2018-06-22 373 | 374 | ## [1.0.0] - 2018-06-22 375 | 376 | ## [0.6.0] - 2018-06-21 377 | 378 | ## [0.1.0] - 2018-06-16 379 | 380 | ## [0.0.1] - 2018-06-16 381 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2021-2024 Cyrille Tuzi 2 | 3 | This software (the "Software") contains 2 parts: 4 | - a free one 5 | - a paid one, called the "Pro Edition" 6 | 7 | The usage of the Pro edition and associated documentation files is granted on the basis of a paid subscription, in the conditions mentioned on the website: 8 | https://cyrilletuzi.gumroad.com/l/schematicspro 9 | 10 | The usage of the Pro edition of the Software is limited to the duration of the subscription. 11 | 12 | Permission to copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software (both the free part and the Pro edition part) is DENIED. 13 | 14 | THE SOFTWARE (BOTH THE FREE PART AND THE PRO EDITION PART) IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics extension for Visual Studio Code 2 | 3 | ## Why this extension? 4 | 5 | ### Productivity! 6 | 7 | Angular is a framework to build applications: it is a lot more work than just a few bits of jQuery. You have to create hundred of components and services. There are 4 ways to do this (from the slowest to the quickest): 8 | - manually from scratch, rewriting all the boilerplate code everytime 9 | - via snippets: as they are static, there is still a lot to do manually 10 | - via Angular CLI: more powerful, but still tedious: you have to type a long and error-prone command line 11 | - via [this extension](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics): just right-click the destination folder, and start coding (**no command line!**) 12 | 13 | ![](https://github.com/cyrilletuzi/vscode-angular-schematics/raw/main/angular-schematics-demo-20191025.gif) 14 | 15 | ### Team work and good practices 16 | 17 | Also, inside a team, you can either decide that: 18 | - everyone do things the way they want, resulting in a big mess over time 19 | - decide the better way to do things, and share the same good practices accross the team 20 | 21 | ## Getting started 22 | 23 | Follow instructions on [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics), or just search for "Angular schematics" by "Cyrille Tuzi" directly inside VS Code Extensions view. 24 | 25 | ## Documentation 26 | 27 | **The documentation is directly included in the extension via the VS Code walkthrough feature**. The walkthrough will appear automatically the first time you install the extension, and covers the basics: 28 | - first generation 29 | - troubleshooting 30 | - configuration 31 | 32 | **Please take a few minutes to read it.** You can access it at any time from the Angular logo on the left sidebar, or in the VS Code menu: 33 | 1. View 34 | 2. Command Palette 35 | 3. search "Documentation" 36 | 4. choose "Angular Schematics: Documentation and tutorial" 37 | 38 | ## Requirements 39 | 40 | The extension: 41 | - is tested with the last 2 versions of Visual Studio Code 42 | - should work in the same versions of editors based on VS Code like VSCodium 43 | - should work in the last version of Cursor 44 | 45 | It may work with previous versions but it is not guaranteed. 46 | 47 | Note that alternative editors may not support all the features of VS Code (for example, Cursor does not support walkthroughs, which serve as documentation in this extension). 48 | 49 | ### 💎 Pro edition 50 | 51 | While this extension is very popular, with nearly **1 million installations**, it is *not* a tool developed by the Angular team or affiliated to Google in any way. 52 | 53 | It is months of *unpaid* work by a single contributor. 54 | 55 | So you will see some new features marked with a diamond 💎. It means they are only available in the Pro edition. 56 | 57 | Feel free to enjoy advanced features and support a contributor at the same time! 💖 58 | 59 | - additional schematics (page, reactive services, Material, unit tests,...) 60 | - advanced options (imports for standalone components, entry files exports,...) 61 | - legacy schematics (components with NgModules, class guards,...) 62 | - custom schematics in a much simpler way than with the Angular CLI 63 | - predefined paths to enforce an architecture 64 | 65 | You will find details about all these features directly in the extension documention. 66 | 67 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 68 | 69 | ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 70 | 71 | ## Release Notes 72 | 73 | [Changelog available here](https://github.com/cyrilletuzi/vscode-angular-schematics/blob/main/CHANGELOG.md). 74 | -------------------------------------------------------------------------------- /TROUBLESHOOTING.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Troubleshooting 2 | 3 | Here is a list of common issues. 4 | 5 |
6 | 7 | ## Requirements 8 | 9 | Using outdated versions of tools can cause issues. The extension is tested with the last 2 versions of Visual Studio Code. It may work with previous versions but it is not guaranteed. 10 | 11 |
12 | 13 | ## I do not see "Generate a file" in the context menu 14 | 15 | Given what this extension does (runtime scripts, file generation,...), it is only enabled in [trusted workspaces](https://code.visualstudio.com/docs/editor/workspace-trust). 16 | 17 | The first time you open a new folder in VS Code, you are asked if you trust the folder. Say "Yes" for your own projects. If you previously said "No" by mistake, you can change it with the "Workspaces: Manage workspace trust" command. 18 | 19 |
20 | 21 | ## I do not see Angular schematics 22 | 23 | This extension will only display the schematics and options relevant to your project. It does so by detecting the dependencies (for example `@angular/core`) in `package.json`. It will look into: 24 | - `package.json` at the root of the opened folder 25 | - `package.json` in parent folders of the opened folder (monorepo case) 26 | 27 | So your project should be opened at the right level, meaning the root of the opened folder should be where `package.json` and other configuration files are located. 28 | 29 | Only if you have a special configuration and nothing else is possible, you can use the configuration helper to force the dependencies detected. 30 | 31 |
32 | 33 | ## The path is wrongly infered 34 | 35 | VS Code [combines single folders together](https://code.visualstudio.com/updates/v1_41#_compact-folders-in-explorer) by default. It is annoying with this extension, as clicking on the right directory becomes more confusing. 36 | 37 | So you should consider disabling the `Compact Folders` VS Code *workspace* setting. 38 | 39 |
40 | 41 | ## Extension logs 42 | 43 | The extension is logging some debug information. You can see the logs: from the VS Code menu > View > Output > select "Angular Schematics - Logs" from the dropdown. 44 | 45 |
46 | 47 | ## Support 48 | 49 | If it still does not work, you can ask a question on [GitHub discussions](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions). 50 | 51 |
52 | -------------------------------------------------------------------------------- /angular-schematics-demo-20191025.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyrilletuzi/vscode-angular-schematics/3f53ff29b62c2c81cc11685567ef9f7543284227/angular-schematics-demo-20191025.gif -------------------------------------------------------------------------------- /walkthroughs/advancedOptions.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Advanced options 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > You love this extension? Thank you! But it represents months of *unpaid* work by a single contributor. So these features are only available in the Pro Edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 | The Pro edition includes the following advanced options: 12 | - standalone components imports automation 13 | - entry files export automation 14 | - interceptor provider automation 15 | 16 |
17 | 18 | ## Standalone components done right 19 | 20 | Angular 14 introduced standalone components, with the official intent to simplify things by getting rid of NgModules. But it also means that now, you have to import everything single component, directive or pipe you use in every component. 21 | 22 | The Pro edition allows you to directly pick the components, directives and pipes you need. 23 | 24 | Currently, it supports: 25 | - Angular (NgIf, NgFor, RouterLink, FormsModule,...) 26 | - Ionic (module and standalone) 27 | - Material (module and standalone) 28 | - PrimeNG (module and standalone) 29 | - Kendo Angular (module and standalone) 30 | - @ngx-translate/core (module and standalone) 31 | - @ng-select/ng-select (module and standalone) 32 | - AG Grid and AG Charts (module and standalone) 33 | - @ng-bootstrap/ng-bootstrap 34 | - ngx-bootstrap (module and standalone) 35 | - @asymmetrik/ngx-leaflet 36 | - @ngxs/form-plugin (module and standalone) 37 | - angular-gridster2 38 | - highcharts-angular 39 | - ng-zorro-antd (module and standalone) 40 | - ng2-charts (module and standalone) 41 | - ng2-dragula 42 | - ng2-file-upload 43 | - ngx-clipboard 44 | - ngx-color-picker 45 | - ngx-countdown 46 | - ngx-echarts 47 | - ngx-file-drop 48 | - ngx-highlightjs (module and standalone) 49 | - ngx-infinite-scroll 50 | - ngx-pagination 51 | - ngx-quill (module and standalone) 52 | - ngx-spinner 53 | 54 | And if your project uses other Angular libraries you would like to be added, just ask in [GitHub issues](https://github.com/cyrilletuzi/vscode-angular-schematics/issues/new/choose), with the "Pro edition - New standalone import" form! 55 | 56 |
57 | 58 | ## Entry files export automation 59 | 60 | If your project uses entry files (`index.ts`, sometimes called "barrels"), how many times did you forget to export a new thing you added? 61 | 62 | With the Pro edition, when generating something inside a folder with an entry file, you will be asked if it is public or private: if you choose "Public", the newly generated thing will automatically be added to the `index.ts` exports. 63 | 64 |
65 | 66 | ## Interceptor provider automation 67 | 68 | An interceptor class alone does nothing. To be used, it must be added to a provider, what the Pro edition does automatically. 69 | 70 |
71 | 72 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 73 | 74 |
75 | 76 | ## Other guides 77 | 78 | - [Documentation homepage](./documentation.md) 79 | - [First generation](./firstGeneration.md) 80 | - [Troubleshooting](./troubleshooting.md) 81 | - [Configuration](./configuration.md) 82 | - [Additional schematics 💎](./advancedSchematics.md) 83 | - [Legacy features 💎](./legacy.md) 84 | - [Custom schematics 💎](./customSchematics.md) 85 | - [Test schematics 💎](./testing.md) 86 | - [Predefined paths 💎](./predefinedPaths.md) 87 | 88 |
89 | -------------------------------------------------------------------------------- /walkthroughs/advancedSchematics.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Additional schematics 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > You love this extension? Thank you! But it represents months of *unpaid* work by a single contributor. So these features are only available in the Pro Edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 |
12 | 13 | The additional schematics you get with the Pro edition include: 14 | - page 15 | - routes 16 | - synchronous reactive service with signal 17 | - asynchronous reactive service with RxJS 18 | - Material (dialog, table) 19 | - just ask for more! 20 | 21 | ## Page 22 | 23 | How often did you forget to associate your page component to a route? It is the most missing schematic of the Angular CLI, and the Pro edition brings it to you. 24 | 25 | The page schematic adds a special `Page` component type, with a `route` option to automatically add the route. 26 | 27 | By default, for better application performances, pages are generated as lazy loaded components. But you can disable lazy loading in the configuration helper. 28 | 29 |
30 | 31 | ## Synchronous reactive service with signal 32 | 33 | Angular 16 introduced signals to simplify reactivity management, but reactivity will always be a complex topic. So the Pro edition brings you a synchronous reactive service schematic with the new signal API, with documentation included. 34 | 35 |
36 | 37 | ## Asynchronous reactive service with RxJS 38 | 39 | Signals are great but are synchronous, which does not fit to every situations. RxJS is still needed in some cases, and is more difficult to handle. So the Pro edition brings you an asynchronous reactive service schematic with RxJS with a normalized, simple and documented API to use. 40 | 41 |
42 | 43 | ## Just ask for more! 44 | 45 | If you are a user of the Pro edition and you would like to have other schematics for Angular, Ionic or an Angular related library, just ask on [GitHub discussions](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions). 46 | 47 |
48 | 49 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 50 | 51 |
52 | 53 | ## Other guides 54 | 55 | - [Documentation homepage](./documentation.md) 56 | - [First generation](./firstGeneration.md) 57 | - [Troubleshooting](./troubleshooting.md) 58 | - [Configuration](./configuration.md) 59 | - [Advanced options 💎](./advancedOptions.md) 60 | - [Legacy features 💎](./legacy.md) 61 | - [Custom schematics 💎](./customSchematics.md) 62 | - [Test schematics 💎](./testing.md) 63 | - [Predefined paths 💎](./predefinedPaths.md) 64 | 65 |
66 | -------------------------------------------------------------------------------- /walkthroughs/configuration.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Configuration 2 | 3 | Some common options can be customized in a one click with the configuration helper: 4 | 5 | - Copy settings from angular.json 6 | - Enable SCSS, Sass or Less styles ⚙️ 7 | - Disable styles ⚙️ 8 | - Enable external HTML templates ⚙️ 9 | - Enable single file components (SFC) ⚙️ 10 | - Enable or disable ngOnInit ⚙️ 11 | - Disable change detection optimization ⚙️ 12 | - Disable lazy loading ⚙️ 13 | - Disable block CSS display ⚙️ 14 | - Enable shadow DOM ⚙️ 15 | - Set the selector prefix ⚙️ 16 | - Disable classes suffixes 💎 17 | - Force NgModules 💎 18 | - Force class interceptors 💎 19 | - Force class guards and resolvers 💎 20 | - Disabled predefined schematics 💎 21 | 22 | ⚙️ = in the Pro edition 💎, configurable per Angular project 23 | 24 | **You can access the configuration helper at any time from the Angular logo on the left sidebar**, or from the VS Code menu: 25 | 1. View 26 | 2. Command Palette 27 | 3. search "configuration" 28 | 4. choose "Angular Schematics: Configuration helper" 29 | 30 |
31 | 32 | ## Where is configuration stored? 33 | 34 | This extension stores the configuration in VS Code *workspace* settings. It means: 35 | - it is applied only to the current opened project 36 | - if you commit the `.vscode/settings.json` file (and you should), all your team will benefit from it 37 | - the configuration helper assists you to set the initial settings, if you want to change them afterwards, just edit the `.vscode/settings.json` file 38 | 39 |
40 | 41 | ## Copy settings from angular.json 42 | 43 | This extension uses its own configuration. But if you have an *official and valid* `angular.json` with some `schematics` settings, the extension can copy them. It should detect the following settings: 44 | - SCSS, Sass or Less styles 45 | - no style 46 | - external HTML templates 47 | - single file components (SFC) 48 | - change detection optimization 49 | - shadow DOM 50 | 51 |
52 | 53 | ## Enable SCSS, Sass or Less styles 54 | 55 | For projects with a design system still using CSS preprocessors (like SCSS for Angular Material or PrimeNG). 56 | 57 |
58 | 59 | ## Disable styles 60 | 61 | For projects not using styles in components and pages because of alternative tools (like Tailwind CSS). 62 | 63 |
64 | 65 | ## Enable external HTML templates 66 | 67 | Unlike the Angular CLI, inline HTML templates are the default in this extension because: 68 | - less files (separation of concerns is not separation of files) 69 | - it is easier to see the data bindings connections between the HTML and the class 70 | - it draws attention to the template length, to keep each component as small as possible 71 | - the official [Angular Language Service extension](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) provides the same coloration and autocompletion as in HTML files 72 | 73 | But you can switch to external HTML templates if you prefer. 74 | 75 |
76 | 77 | ## Enable single file components (SFC) 78 | 79 | Some may want to go even further with single file components (inline HTML, inline styles and no subfolder). 80 | 81 |
82 | 83 | ## Enable or disable ngOnInit 84 | 85 | By default in this extension: 86 | - components does not include `ngOnInit()` (because most pure components should not handle such logic) 87 | - pages includes `ngOnInit()` (because pages have to handle logic) 88 | 89 | But you can enable or disable ngOnInit() as you wish. 90 | 91 |
92 | 93 | ## Disable change detection optimization 94 | 95 | With the introduction of signals in Angular 16, the good practice is to optimize the change detection strategy of all components and pages to `OnPush`. 96 | 97 | If your project uses Angular <=15, or if you or your team are not yet comfortable with these topics, you can disable the change detection optimization in pages and/or in components. 98 | 99 |
100 | 101 | ## Disable lazy loading 102 | 103 | By default, for better application performances, pages are generated as lazy loaded components. But you can disable lazy loading. 104 | 105 |
106 | 107 | ## Disable block CSS display 108 | 109 | Web components have an `inline` CSS display by default. It is a flaw of the standard, as 99% of components are in fact used as `block`s. So when generating components, `:host { display: block; }` is automatically added in styles, but you can disable it. 110 | 111 |
112 | 113 | ## Enable shadow DOM 114 | 115 | For projects ready to use native shadow DOM view encapsulation. 116 | 117 |
118 | 119 | ## Set the selector prefix 120 | 121 | Angular default prefix selector for components, directives and pipes is `app`. 122 | 123 | If you want a different one, this is the only setting for which the extension uses the official `angular.json` `prefix` configuration, because this one is simple to get and in an Angular CLI monorepo, it can differ from one application or library to another. 124 | 125 |
126 | Example of angular.json 127 | 128 | ```json 129 | { 130 | "version": 1, 131 | "projects": { 132 | "some-app": { 133 | "projectType": "application", 134 | "prefix": "app" 135 | }, 136 | "some-lib": { 137 | "projectType": "library", 138 | "prefix": "mycompany", 139 | } 140 | } 141 | } 142 | ``` 143 |
144 | 145 | But it requires a *valid and official* `angular.json`, which is not the case in all projects. Only such cases, set the selector prefix via the extension configuration helper. It will be global to the workspace. 146 | 147 |
148 | 149 | ## 💎 Enable classes prefixes 150 | 151 | In the Pro edition, you can enable automatic classes prefixes, for example to generate `MatButtonComponent` instead of `ButtonComponent` (given "mat" is set as the selector prefix). It is useful when doing a library of components. 152 | 153 |
154 | 155 | ## 💎 Disable classes suffixes 156 | 157 | In the Pro edition, you can disable automatic classes suffixes, for example to generate `SomeButton` instead of `SomeButtonComponent`, or `SomeApiClient` instead of `SomeApiClientService`. 158 | 159 | This option allows to partly align with the upcoming [new Angular style guide](https://gist.github.com/jelbourn/0158b02cfb426e69c172db4ec92e3c0c), being discussed in [this RFC](https://github.com/angular/angular/discussions/58412). 160 | 161 | It has also been the standard in some design systems libraries since always, like Angular Material itself (it is `MatButton`, not `MatButtonComponent`). 162 | 163 |
164 | 165 | ## 💎 Force NgModules 166 | 167 | In the Pro edition, if your project uses Angular <=13 or is not ready for standalone components yet. 168 | 169 |
170 | 171 | ## 💎 Class interceptors 172 | 173 | In the Pro edition, if your project uses Angular <=14 or is not ready for functional interceptors yet. 174 | 175 |
176 | 177 | ## 💎 Class guards and resolvers 178 | 179 | In the Pro edition, if your project uses Angular <=14.1 or is not ready for functional guards and resolvers yet. Note [class guards and resolvers are officially deprecated](https://angular.io/guide/deprecations#router-class-and-injection-token-guards) by Angular and planned for removal. 180 | 181 |
182 | 183 | ## 💎 Disable predefined schematics 184 | 185 | In the Pro edition, if some of the predefined schematics do not suit your project, you can disable them, and even replace them with your own custom schematics. 186 | 187 |
188 | 189 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 190 | 191 |
192 | 193 | ## Other guides 194 | 195 | - [Documentation homepage](./documentation.md) 196 | - [First generation](./firstGeneration.md) 197 | - [Troubleshooting](./troubleshooting.md) 198 | - [Additional schematics 💎](./advancedSchematics.md) 199 | - [Advanced options 💎](./advancedOptions.md) 200 | - [Legacy features 💎](./legacy.md) 201 | - [Custom schematics 💎](./customSchematics.md) 202 | - [Test schematics 💎](./testing.md) 203 | - [Predefined paths 💎](./predefinedPaths.md) 204 | 205 |
206 | -------------------------------------------------------------------------------- /walkthroughs/customSchematics.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Create a custom schematic 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > You love this extension? Thank you! But it represents months of *unpaid* work by a single contributor. So this feature is only available in the Pro Edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 |
12 | 13 | The Pro edition allows you to create your own schematics. It is not just about saving time with some code snippets, it is also a way to enforce good practices and a whole architecture in a project. 14 | 15 | Summary: 16 | - Create your first schematic 17 | - Schematic structure 18 | - Handlebars templating 19 | - schematic.json 20 | - Schematic options 21 | - Schematic features 22 | - Share schematics between projects 23 | - Disable predefined schematics 24 | - Advanced configuration 25 | 26 |
27 | 28 | ## Create your first schematic 29 | 30 | 1. Launch the "Create a custom schematic" command 31 | 2. Choose a unique prefix (example: "mycompany") (first time only) 32 | 3. Choose a unique id (example: "angular-component") 33 | 4. Choose a human readable name (example: "Component") 34 | 5. Choose a model to start from (component, service or from scratch) 35 | 6. Edit the opened template file with the code you want to generate 36 | 37 |
38 | 39 | ## Schematic structure 40 | 41 | The steps above generate a folder with the following structure: 42 | - a `schematic.json` configuration file 43 | - a `files` subfolder with one or more Handlebars templates files (`{{fileName}}.ts.hbs`) 44 | 45 | Optionally, you can: 46 | - change the main template file name (be sure to change the `mainFile` property accordingly in `schematic.json`) 47 | - add more templates files to generate in `files` (and even subfolders) 48 | 49 |
50 | 51 | ## Handlebars templating 52 | 53 | The extension uses Handlebars (`.hbs` files) as the templating syntax, which is widely known and directly supported by VS Code. You can refer to the full [official documentation](https://handlebarsjs.com/guide), but here is a reminder of the basic syntax: 54 | 55 | Available expressions: 56 | - `{{name}}` hello-world (raw user input) 57 | - `{{fileName}}` hello-world or hello-world.suffix (kebab-cased user input) 58 | - `{{className}}` HelloWorld or HelloWorldSuffix (PascalCased user input) 59 | - `{{camelName}}` helloWorld or helloWorldSuffix (camelCased user input) 60 | - `{{options.someOption}}` value of an option defined in schematic.json 61 | 62 | Additional expression in TypeScript / JavaScript schematics: 63 | - `{{{quote}}}` " or ' (depending on Prettier / Editorconfig / VS Code configuration) 64 | 65 | Note the 3 brackets for `{{{quote}}}` is not an error: the default 2 brackets syntax in Handlebars is HTML escaping the value, so with `{{quote}}` you would end up with `"` instead of a real quote in the final generated file. 66 | 67 | Conditions: 68 | - `{{#if options.someOption}}some code{{/if}}` 69 | - `{{#unless options.someOption}}some code{{/unless}}` 70 | 71 | Available helpers: 72 | - `{{dasherize name}}` hello-world 73 | - `{{classify name}}` HelloWorld 74 | - `{{camelize name}}` helloWorld 75 | 76 | Template example: 77 | ```hbs 78 | import { Injectable } from '@angular/core'; 79 | 80 | @Injectable({ providedIn: 'root' }) 81 | export class {{className}} { 82 | 83 | constructor() {} 84 | 85 | } 86 | ``` 87 | 88 |
89 | 90 | ## schematic.json 91 | 92 | `schematic.json` required properties: 93 | - `id` (must be unique) 94 | - `label` 95 | - `collection` 96 | - `mainFile`: the file opened when generation ends (must be the exact file name that is in "files" folder, example: "{{fileName}}.ts.hbs") 97 | 98 | Optional properties: 99 | - `collection`: category shown when choosing schematics 100 | - `description`: directly visible below the schematic label 101 | - `tooltipDescription`: displayed when the user click on the "?" icon 102 | - `pathSubfolder`: should the new files be generated directly inside the destination path (example: /path/to/hello-world.component.ts), which is the default, or inside a subfolder (example: path/to/hello-world/hello-world.component.ts), which is often a better option when multiple files are generated 103 | - `suffix`: lowercased suffix for file and class names (example: "component" suffix will result in hello-world.component file name and HelloWorldComponent class name) 104 | - `dependenciesRequired`: dependencies required to enable this schematic (example: ["@angular/core"]), it only makes sense if you share schematics between projects (otherwise if you create a schematic for a specific project, you already know you want to activate it) 105 | - `features`: list of special features enabled for this schematic, see below 106 | - `options`: list of options configurable by the user, see below 107 | 108 |
109 | 110 | ## Schematic options 111 | 112 | As a general advice, **custom schematics should have as few options as possible**. For example, a `style` option to choose between CSS and SCSS makes no sense in a custom schematic, as one of the goals is to enforce one way of doing things in your project. So use directly the good style extension. Even if you plan to share schematics between projects, it will often be easier and quicker to adapt schematics in each project than to manage options. 113 | 114 | Options names must be in camelCase (example: "externalTemplate"), and must define: 115 | - `description`: as there is a display space limit, must be short; if the option is `required`, the description will be used as prompt, so it should be in the form of a question (example: "What type of style file do you want?") 116 | - `type`: `boolean`, `string` or `array` (of strings) 117 | 118 | Example: 119 | ```json 120 | { 121 | "options": { 122 | "externalTemplate": { 123 | "description": "Do you want an external template instead of an inline one?", 124 | "type": "boolean" 125 | } 126 | } 127 | } 128 | ``` 129 | 130 | String and array `type` can have a list of fixed values: 131 | - `enum` 132 | - `enumDescriptions`: optional descriptions for the `enum` values in the same order, or for boolean `type` description for true then for false 133 | 134 | Example: 135 | ```json 136 | { 137 | "options": { 138 | "style": { 139 | "description": "What type of style do you use?", 140 | "type": "string", 141 | "enum": ["css", "scss"], 142 | "enumDescriptions": ["Native CSS styles", "Sass styles"] 143 | } 144 | } 145 | } 146 | ``` 147 | 148 | Optionally, they can define: 149 | - `required`: if enabled, the option will be automatically asked to the user on generation; otherwise and by default, the option will be configurable in an optional step before the generation confirmation 150 | - `suggestToSetAsDefault`: if enabled, the UI will propose to the user to set the value chosen as the default for next generations (for now, only works for boolean `type` and string `type` with `enum`) 151 | - `default`: default value (must match the option `type`; booleans are already false by default) 152 | 153 | Then, you can use the options in your Handlebars templates files: 154 | 155 | ```hbs 156 | {{#if options.externalTemplate}}{{/if}} 157 | {{options.style}} 158 | ``` 159 | 160 | As the Handlebars mantra is "no logic in templates", you can just write conditions checking if an option is truthy or falsy, but not if an option equals a specific value. Consequently: 161 | - keep your options as simple as possible (for example, when an option has only 2 possible values, do a boolean option, not an enum) 162 | - boolean options default value should be `false` (so for example, if a schematic includes tests by default, do `skipTests` instead of doing `tests` with true as default) 163 | 164 | Also, options with `enum` will create additional expressions available in templates. 165 | 166 |
167 | Example of string enum in schematic.json 168 | 169 | ```json 170 | { 171 | "options": { 172 | "notation": { 173 | "type": "string", 174 | "enum": [ 175 | "class", 176 | "function" 177 | ] 178 | } 179 | } 180 | } 181 | ``` 182 | 183 | ```hbs 184 | {{#if options.notationFunction}}some code{{/if}} 185 | ``` 186 |
187 | 188 |
189 | Example of array enum in schematic.json 190 | 191 | ```json 192 | { 193 | "options": { 194 | "implements": { 195 | "type": "array", 196 | "enum": [ 197 | "CanActivate", 198 | "CanDeactivate" 199 | ] 200 | } 201 | } 202 | } 203 | ``` 204 | 205 | ```hbs 206 | {{#if options.implements.CanActivate}}some code{{/if}} 207 | {{#if options.implements.CanDeactivate}}some other code{{/if}} 208 | ``` 209 |
210 | 211 |
212 | 213 | ## Schematic features 214 | 215 | One of the goal of the Pro edition is to give you the ability to create your own advanced schematics (not just static code snippets) while keep it as simple as possible (unlike tools like Angular CLI). 216 | 217 | As you have seen adove, the templating syntax is very simple. Advanced operations will be handled directly by the extension via `features`. 218 | 219 | Note that some features imply to reserve some `options` names to them. 220 | 221 |
222 | 223 | ### General features 224 | 225 |
226 | exportableInEntryFile 227 | 228 | When an `index.ts` exists in the destination path or in a parent folder, the UI will automatically ask the user if the entity is public (and thus should be added to the `index.ts` exports) or private (no export); should be enabled for nearly all schematics generating an exportable entity (class, const, function,...). 229 | 230 | Options reserved: `export` 231 |
232 |
233 | 234 | ### Angular features 235 | 236 |
237 | angular 238 | 239 | Should be enabled for all Angular schematics. Activates low-level Angular features, like checking the generation is done in a project configured in `angular.json`. 240 |
241 |
242 | angularEslintComponentSuffix 243 | 244 | Should be enabled for Angular component schematics using a `suffix` different from "component" (example: "page"). If Angular ESLint is installed, it will automatically configure it to allow this suffix. 245 |
246 |
247 | angularAddComponentRoute 248 | 249 | For Angular page component schematic, will ask and add a route in the closest `.routes.ts` or `-routing.module.ts` file. 250 | 251 | By default, the page will be lazy-loaded (`loadComponent`). 252 | 253 | Options reserved: `route`, `eagerLoading` 254 |
255 |
256 | angularSelectorCamelCase 257 | 258 | For Angular directives and pipes schematics, camelCased `{{selector}}` will be available in templates. 259 | 260 | Options reserved: `selectorPrefix` 261 |
262 |
263 | angularSelectorKebabCase 264 | 265 | For Angular components schematics, kebab-cased `{{selector}}` will be available in templates. 266 | 267 | Options reserved: `selectorPrefix` 268 |
269 |
270 | angularImportsInsideComponent 271 | 272 | For Angular standalone component schematics, will ask the user if they want to import something (like CommonModule, FormsModule, MatXModule, Prime, IonicModule...). 273 | 274 | Option reserved: `imports` 275 |
276 |
277 | angularAddInterceptorProvider 278 | 279 | For Angular interceptors schematics, will add the provider. 280 |
281 | 282 |
283 | 284 | ### Deprecated Angular features 285 | 286 | Angular 15 introduced standalone components to get rid of NgModules. Thus the following features should be avoided. 287 | 288 |
289 | angularAddToModuleDeclarations 290 | 291 | Should be enabled for all legacy Angular component, directive and pipe schematics. Will automatically declare the component, directive or pipe in the closest `NgModule`. 292 | 293 | Option reserved: `skipDeclaration` 294 |
295 |
296 | angularImportGeneratedModuleIntoOtherModules 297 | 298 | For Angular modules of declarations schematics, will ask the user where to import the generated module. 299 | 300 | Option reserved: `modules` 301 |
302 |
303 | angularImportLazyModuleIntoOtherRoutingModule 304 | 305 | For Angular modules of lazy-loaded routing schematics, will ask the user where to import the generated module. 306 | 307 | Options reserved: `module`, `route` 308 |
309 |
310 | 311 | ## Share schematics between projects 312 | 313 | Schematics are just files like any library, so you can copy/paste them, but also publish them on npm or any other public or private registry, to share them between projects. Then, in your VS Code settings. 314 | 315 | ```json 316 | { 317 | "angular-schematics.additionalSchematics": "./node_modules/@mycompany/schematics" 318 | } 319 | ``` 320 | 321 |
322 | 323 | **Disable predefined schematics** 324 | 325 | If you want to replace a schematic already existing in the extension by your own, you can use the configuration helper to disable predefined schematics. But as one the goals of the extension is to provide sensible defaults and good practices, be sure you know what you do. 326 | 327 |
328 | 329 | ## Advanced configuration 330 | 331 |
332 | 333 | **Local schematics prefix** 334 | 335 | When you create your first custom schematic, a prefix will be asked, because schematics ids must be unique. It will be remembered for the next schematics creation. You can change it at any time in your VS Code settings. 336 | 337 |
338 | Example of custom setting 339 | 340 | ```json 341 | { 342 | "angular-schematics.localSchematicsPrefix": "mycompany" 343 | } 344 | ``` 345 |
346 | 347 |
348 | 349 | **Local schematics path** 350 | 351 | By default, new schematics will be created in a `schematics` folder. It is recommended to keep the default value, but you can change the path in your VS Code settings. 352 | 353 |
354 | Example of custom setting 355 | 356 | ```json 357 | { 358 | "angular-schematics.localSchematicsPath": "./some-other-folder" 359 | } 360 | ``` 361 |
362 | 363 |
364 | 365 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 366 | 367 |
368 | 369 | ## Other guides 370 | 371 | - [Documentation homepage](./documentation.md) 372 | - [First generation](./firstGeneration.md) 373 | - [Troubleshooting](./troubleshooting.md) 374 | - [Configuration](./configuration.md) 375 | - [Additional schematics 💎](./advancedSchematics.md) 376 | - [Advanced options 💎](./advancedOptions.md) 377 | - [Legacy features 💎](./legacy.md) 378 | - [Test schematics 💎](./testing.md) 379 | - [Predefined paths 💎](./predefinedPaths.md) 380 | 381 |
382 | -------------------------------------------------------------------------------- /walkthroughs/documentation.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Documentation 2 | 3 | This documentation is a copy of the integrated documentation included directly in Visual Studio Code, for alternative editors which do not support the VS Code "walkthrough" feature. 4 | 5 | It should be used only in this case. Otherwise, the integrated documentation in VS Code is much better because it includes direct links to launch the adequate commands with just a click. 6 | 7 | **You can access the integrated documentation at any time from the Angular logo on the left sidebar**, or from the VS Code menu: 8 | 1. View 9 | 2. Command Palette 10 | 3. search "Documentation" 11 | 4. choose "Angular Schematics: Documentation and tutorial" 12 | 13 | ## Pro edition 💎 14 | 15 | In this documentation and when using the extension, you will see some features marked with a diamond 💎. It means they are only available in the Pro edition. 16 | 17 | While this extension is very popular, with 1 million installations, it is *not* a tool developed by the Angular team or affiliated to Google in any way. 18 | 19 | It is months of *unpaid* work by a single contributor. 20 | 21 | So feel free to enjoy advanced features and support a contributor at the same time! 💖 22 | 23 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 24 | 25 | ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 26 | 27 | ## Table of contents 28 | 29 | - [First generation](./firstGeneration.md) 30 | - [Troubleshooting](./troubleshooting.md) 31 | - [Configuration](./configuration.md) 32 | - [Additional schematics 💎](./advancedSchematics.md) 33 | - [Advanced options 💎](./advancedOptions.md) 34 | - [Legacy features 💎](./legacy.md) 35 | - [Custom schematics 💎](./customSchematics.md) 36 | - [Test schematics 💎](./testing.md) 37 | - [Predefined paths 💎](./predefinedPaths.md) 38 | 39 |
-------------------------------------------------------------------------------- /walkthroughs/firstGeneration.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - First generation 2 | 3 | Let us generate a very basic class file. 4 | 5 |
6 | 7 | ## Check Git status 8 | 9 | While this extension mainly *add* new files, it can also *modify* existing files. For example, when generating an Angular page, the nearest routing file will be updated to add the route. 10 | 11 | So before launching a new generation, **it is strongly recommended to check that the Git status is clean** (or any other Source Control Manager), which means there is no uncommitted files. 12 | 13 | It will allow you to easily and quickly revert the generation if needed. 14 | 15 |
16 | 17 | ## Automatic path detection 18 | 19 | One of the main pain points of generation tools done via command lines (like Angular CLI) is that you must type the full path to where you want to generate something. It is very tedious and typos often happen. 20 | 21 | This extension makes it quick and easy. **Just right-click on the folder you want: no command line, and the path is pre-filled.** 22 | 23 |
24 | 25 | ## Generate a class 26 | 27 | 1. Go to the Explorer view and **right-click on the destination folder of your choice** 28 | 2. Click on **"Angular Schematics: Generate a file"*** 29 | 3. Choose the "Class" schematic* 30 | 4. Just type a name (the path is already inferred) 31 | 5. Confirm 32 | 33 | \* See the troubleshooting guide in the next walkthrough step if you do not see this option. 34 | 35 |
36 | 37 | ## File auto opening 38 | 39 | If the generation succeeded, **the generated file is opened automatically**: just start coding! 40 | 41 | If the command failed, see troubleshooting in the next walkthrough step. 42 | 43 |
44 | 45 | ## Other schematics 46 | 47 | You can now try any other schematics: 48 | 49 | **Free edition** 50 | - service 51 | - standalone component 52 | - standalone directive 53 | - standalone pipe 54 | - functional guard 55 | - functional resolver 56 | - functional interceptor 57 | - interface 58 | - class 59 | 60 | **Pro edition 💎** 61 | - all schematics from the free edition 62 | - page 63 | - routes 64 | - synchronous reactive service with signal 65 | - asynchronous reactive service with RxJS 66 | - legacy component, directive and pipe with NgModules 67 | - legacy class guard, resolver and interceptor 68 | - Material (dialog, table) 69 | - Jasmine / Jest unit test 70 | 71 | If you do not see some schematics, see the troubleshooting guide in the next walkthrough step. 72 | 73 |
74 | 75 | ## Other guides 76 | 77 | - [Documentation homepage](./documentation.md) 78 | - [Troubleshooting](./troubleshooting.md) 79 | - [Configuration](./configuration.md) 80 | - [Additional schematics 💎](./advancedSchematics.md) 81 | - [Advanced options 💎](./advancedOptions.md) 82 | - [Legacy features 💎](./legacy.md) 83 | - [Custom schematics 💎](./customSchematics.md) 84 | - [Test schematics 💎](./testing.md) 85 | - [Predefined paths 💎](./predefinedPaths.md) 86 | 87 |
88 | -------------------------------------------------------------------------------- /walkthroughs/legacy.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Legacy schematics 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > Maintaining legacy features has a cost. The cost companies making money do not invest to migrate should not be the charge of unpaid contributors. So legacy features are only available in the Pro edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 |
12 | 13 | The legacy schematics you get with the Pro edition include: 14 | - component with NgModules 15 | - page with NgModules 16 | - directive with NgModules 17 | - pipe with NgModules 18 | - NgModule of routing 19 | - NgModule of declarations (components, directives, pipes) 20 | - Class guard 21 | - Class resolver 22 | - Class interceptor 23 | 24 |
25 | 26 | ## NgModules 27 | 28 | If your project uses Angular <=13 or is not ready for standalone components yet. 29 | 30 | Once your Pro edition license is activated, force NgModules in the configuration helper. 31 | 32 |
33 | 34 | ## Class interceptors 35 | 36 | If your project uses Angular <=14 or is not ready for functional interceptors yet. 37 | 38 | Once your Pro edition license is activated, force class interceptors in the configuration helper. 39 | 40 |
41 | 42 | ## Class guards and resolvers 43 | 44 | If your project uses Angular <=14.1 or is not ready for functional guards and resolvers yet. Note [class guards and resolvers are officially deprecated](https://angular.io/guide/deprecations#router-class-and-injection-token-guards) by Angular and planned for removal. 45 | 46 | Once your Pro edition license is activated, force class guards and resolvers in the configuration helper. 47 | 48 |
49 | 50 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 51 | 52 |
53 | 54 | ## Other guides 55 | 56 | - [Documentation homepage](./documentation.md) 57 | - [First generation](./firstGeneration.md) 58 | - [Troubleshooting](./troubleshooting.md) 59 | - [Configuration](./configuration.md) 60 | - [Additional schematics 💎](./advancedSchematics.md) 61 | - [Advanced options 💎](./advancedOptions.md) 62 | - [Custom schematics 💎](./customSchematics.md) 63 | - [Test schematics 💎](./testing.md) 64 | - [Predefined paths 💎](./predefinedPaths.md) 65 | 66 |
67 | -------------------------------------------------------------------------------- /walkthroughs/predefinedPaths.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Predefined paths 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > You love this extension? Thank you! But it represents months of *unpaid* work by a single contributor. So this feature is only available in the Pro Edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 | The Pro edition allows you to assign a specific schematic to a path. Why? 12 | - saves time (one less step when generating) 13 | - allows to enforce an architecture 14 | 15 |
16 | 17 | ## Predefined paths configuration 18 | 19 | In your projects, you probably follow some kind of architecture. Let us keep it simple and say you put components in `src/app/components` and services in `/src/app/services`. 20 | 21 | With the Pro edition, you can predefine the schematic associated to those folders. That will be one less step when generating a component or service. 22 | 23 | VS Code settings example: 24 | 25 | ```json 26 | { 27 | "angular-schematics.pathsWithPredefinedSchematic": [{ 28 | "path": "src/app/components", 29 | "schematicId": "angular-component" 30 | }, { 31 | "path": "src/app/services", 32 | "schematicId": "angular-service" 33 | }] 34 | } 35 | ``` 36 | 37 |
38 | 39 | ## Enforce architecture 40 | 41 | But it is not just about saving time. Are you the team lead? You can also **enforce these architecture settings**, to force your whole team to stay on track. 42 | 43 | Combine that with the custom schematics feature, and you can **enforce how all things are done in the project**. 44 | 45 | VS Code settings example: 46 | 47 | ```json 48 | { 49 | "angular-schematics.pathsWithPredefinedSchematic": [{ 50 | "path": "src/app/components", 51 | "schematicId": "angular-component" 52 | }, { 53 | "path": "src/app/services", 54 | "schematicId": "angular-service" 55 | }, { 56 | "path": "src/app/pages", 57 | "schematicId": "angular-page" 58 | }], 59 | "angular-schematics.enforceArchitecture": "error" 60 | } 61 | ``` 62 | 63 | `enforceArchitecture` accepts: 64 | - `error`: will restrict generation in other paths 65 | - `warn`: will warn the user but allows to do it anyway 66 | 67 |
68 |
69 | 70 | ### Multiple schematics allowed 71 | 72 | VS Code settings example: 73 | ```json 74 | { 75 | "angular-schematics.pathsWithPredefinedSchematic": [{ 76 | "path": "src/app/core-declarations", 77 | "schematicId": [ 78 | "angular-component", 79 | "angular-directive", 80 | "angular-pipe" 81 | ] 82 | }] 83 | } 84 | ``` 85 | 86 |
87 | 88 | ### Globs 89 | 90 | VS Code settings example: 91 | 92 | ```json 93 | { 94 | "angular-schematics.pathsWithPredefinedSchematic": [{ 95 | "path": "src/app/**/pages", 96 | "schematicId": "angular-page" 97 | }] 98 | } 99 | ``` 100 | 101 | `minimatch` library is used, you can refer to [its documentation](https://github.com/isaacs/minimatch). 102 | 103 | Be careful to not to define overlapping paths, otherwise the first match will be used. 104 | 105 |
106 | 107 | ### List of schematicsId 108 | 109 | The list of schematics ids will be suggested on autocomplete, but here is a full list: 110 | 111 | - angular-service 112 | - angular-component 113 | - angular-page 114 | - angular-directive 115 | - angular-pipe 116 | - angular-sync-reactive-service 117 | - angular-async-reactive-service 118 | - angular-guard 119 | - angular-interceptor 120 | - angular-resolver 121 | - angular-unit-test 122 | - typescript-interface 123 | - typescript-class 124 | 125 |
126 | 127 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 128 | 129 |
130 | 131 | ## Other guides 132 | 133 | - [Documentation homepage](./documentation.md) 134 | - [First generation](./firstGeneration.md) 135 | - [Troubleshooting](./troubleshooting.md) 136 | - [Configuration](./configuration.md) 137 | - [Additional schematics 💎](./advancedSchematics.md) 138 | - [Advanced options 💎](./advancedOptions.md) 139 | - [Legacy features 💎](./legacy.md) 140 | - [Custom schematics 💎](./customSchematics.md) 141 | - [Test schematics 💎](./testing.md) 142 | 143 |
144 | -------------------------------------------------------------------------------- /walkthroughs/pro/advancedOptions.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Advanced options 💎 2 | 3 | Your Pro edition subscription includes the following advanced options: 4 | - standalone components imports automation 5 | - entry files export automation 6 | - interceptor provider automation 7 | 8 |
9 | 10 | ## Standalone components done right 11 | 12 | Angular 14 introduced standalone components, with the official intent to simplify things by getting rid of NgModules. But it also means that now, you have to import everything single component, directive or pipe you use in every component. 13 | 14 | Your Pro edition allows you to directly pick the components, directives and pipes you need. 15 | 16 | Currently, it supports: 17 | - Angular (NgIf, NgFor, RouterLink, FormsModule,...) 18 | - Ionic (module and standalone) 19 | - Material (module and standalone) 20 | - PrimeNG (module and standalone) 21 | - Kendo Angular (module and standalone) 22 | - @ngx-translate/core (module and standalone) 23 | - @ng-select/ng-select (module and standalone) 24 | - AG Grid and AG Charts (module and standalone) 25 | - @ng-bootstrap/ng-bootstrap 26 | - ngx-bootstrap (module and standalone) 27 | - @asymmetrik/ngx-leaflet 28 | - @ngxs/form-plugin (module and standalone) 29 | - angular-gridster2 30 | - highcharts-angular 31 | - ng-zorro-antd (module and standalone) 32 | - ng2-charts (module and standalone) 33 | - ng2-dragula 34 | - ng2-file-upload 35 | - ngx-clipboard 36 | - ngx-color-picker 37 | - ngx-countdown 38 | - ngx-echarts 39 | - ngx-file-drop 40 | - ngx-highlightjs (module and standalone) 41 | - ngx-infinite-scroll 42 | - ngx-pagination 43 | - ngx-quill (module and standalone) 44 | - ngx-spinner 45 | 46 | And if your project uses other Angular libraries you would like to be added, just ask in [GitHub issues](https://github.com/cyrilletuzi/vscode-angular-schematics/issues/new/choose), with the "Pro edition - New standalone import" form! 47 | 48 |
49 | 50 | ## Entry files export automation 51 | 52 | If your project uses entry files (`index.ts`, sometimes called "barrels"), how many times did you forget to export a new thing you added? 53 | 54 | With your Pro edition, when generating something inside a folder with an entry file, you will be asked if it is public or private: if you choose "Public", the newly generated thing will automatically be added to the `index.ts` exports. 55 | 56 |
57 | 58 | ## Interceptor provider automation 59 | 60 | An interceptor class alone does nothing. To be used, it must be added to a provider, what your Pro edition does automatically. 61 | 62 |
63 | 64 | ## Other guides 65 | 66 | - [Documentation homepage](./documentation.md) 67 | - [First generation](./firstGeneration.md) 68 | - [Troubleshooting](./troubleshooting.md) 69 | - [Configuration](./configuration.md) 70 | - [Additional schematics 💎](./advancedSchematics.md) 71 | - [Legacy features 💎](./legacy.md) 72 | - [Custom schematics 💎](./customSchematics.md) 73 | - [Test schematics 💎](./testing.md) 74 | - [Predefined paths 💎](./predefinedPaths.md) 75 | 76 |
77 | -------------------------------------------------------------------------------- /walkthroughs/pro/advancedSchematics.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Additional schematics 💎 2 | 3 | Your Pro edition subscription includes the following additional schematics: 4 | - page 5 | - routes 6 | - synchronous reactive service with signal 7 | - asynchronous reactive service with RxJS 8 | - Material (dialog, table) 9 | - just ask for more! 10 | 11 | ## Page 12 | 13 | How often did you forget to associate your page component to a route? It is the most missing schematic of the Angular CLI, and your Pro edition brings it to you. 14 | 15 | The page schematic adds a special `Page` component type, with a `route` option to automatically add the route. 16 | 17 | By default, for better application performances, pages are generated as lazy loaded components. But you can disable lazy loading in the configuration helper. 18 | 19 |
20 | 21 | ## Synchronous reactive service with signal 22 | 23 | Angular 16 introduced signals to simplify reactivity management, but reactivity will always be a complex topic. So your Pro edition brings you a synchronous reactive service schematic with the new signal API, with documentation included. 24 | 25 |
26 | 27 | ## Asynchronous reactive service with RxJS 28 | 29 | Signals are great but are synchronous, which does not fit to every situations. RxJS is still needed in some cases, and is more difficult to handle. So your Pro edition brings you an asynchronous reactive service schematic with RxJS with a normalized, simple and documented API to use. 30 | 31 |
32 | 33 | ## Just ask for more! 34 | 35 | You would like to have other schematics for Angular, Ionic or an Angular related library? Just ask on [GitHub discussions](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions). 36 | 37 |
38 | 39 | ## Other guides 40 | 41 | - [Documentation homepage](./documentation.md) 42 | - [First generation](./firstGeneration.md) 43 | - [Troubleshooting](./troubleshooting.md) 44 | - [Configuration](./configuration.md) 45 | - [Advanced options 💎](./advancedOptions.md) 46 | - [Legacy features 💎](./legacy.md) 47 | - [Custom schematics 💎](./customSchematics.md) 48 | - [Test schematics 💎](./testing.md) 49 | - [Predefined paths 💎](./predefinedPaths.md) 50 | 51 |
52 | -------------------------------------------------------------------------------- /walkthroughs/pro/configuration.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Configuration 2 | 3 | Some common options can be customized in a one click with the configuration helper: 4 | 5 | - Copy settings from angular.json 6 | - Enable SCSS, Sass or Less styles 7 | - Disable styles 8 | - Enable external HTML templates 9 | - Enable single file components (SFC) 10 | - Enable or disable ngOnInit 11 | - Disable change detection optimization 12 | - Disable lazy loading 13 | - Disable block CSS display 14 | - Enable shadow DOM 15 | - Set the selector prefix 16 | - Disable classes suffixes 💎 17 | - Force NgModules 💎 18 | - Force class interceptors 💎 19 | - Force class guards and resolvers 💎 20 | - Disabled predefined schematics 💎 21 | 22 | **You can access the configuration helper at any time from the Angular logo on the left sidebar**, or from the VS Code menu: 23 | 1. View 24 | 2. Command Palette 25 | 3. search "configuration" 26 | 4. choose "Angular Schematics: Configuration helper" 27 | 28 |
29 | 30 | ## Where is configuration stored? 31 | 32 | This extension stores the configuration in VS Code *workspace* settings. It means: 33 | - it is applied only to the current opened project 34 | - if you commit the `.vscode/settings.json` file (and you should), all your team will benefit from it 35 | - the configuration helper assists you to set the initial settings, if you want to change them afterwards, just edit the `.vscode/settings.json` file 36 | 37 |
38 | 39 | ## Copy settings from angular.json 40 | 41 | This extension uses its own configuration. But if you have an *official and valid* `angular.json` with some `schematics` settings, the extension can copy them. It should detect the following settings: 42 | - SCSS, Sass or Less styles 43 | - no style 44 | - external HTML templates 45 | - single file components (SFC) 46 | - change detection optimization 47 | - shadow DOM 48 | 49 |
50 | 51 | ## Enable SCSS, Sass or Less styles 52 | 53 | For projects with a design system still using CSS preprocessors (like SCSS for Angular Material or PrimeNG). 54 | 55 |
56 | 57 | ## Disable styles 58 | 59 | For projects not using styles in components and pages because of alternative tools (like Tailwind CSS). 60 | 61 |
62 | 63 | ## Enable external HTML templates 64 | 65 | Unlike the Angular CLI, inline HTML templates are the default in this extension because: 66 | - less files (separation of concerns is not separation of files) 67 | - it is easier to see the data bindings connections between the HTML and the class 68 | - it draws attention to the template length, to keep each component as small as possible 69 | - the official [Angular Language Service extension](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) provides the same coloration and autocompletion as in HTML files 70 | 71 | But you can switch to external HTML templates if you prefer. 72 | 73 |
74 | 75 | ## Enable single file components (SFC) 76 | 77 | Some may want to go even further with single file components (inline HTML, inline styles and no subfolder). 78 | 79 |
80 | 81 | ## Enable or disable ngOnInit 82 | 83 | By default in this extension: 84 | - components does not include `ngOnInit()` (because most pure components should not handle such logic) 85 | - pages includes `ngOnInit()` (because pages have to handle logic) 86 | 87 | But you can enable or disable ngOnInit() as you wish. 88 | 89 |
90 | 91 | ## Disable change detection optimization 92 | 93 | With the introduction of signals in Angular 16, the good practice is to optimize the change detection strategy of all components and pages to `OnPush`. 94 | 95 | If your project uses Angular <=15, or if you or your team are not yet comfortable with these topics, you can disable the change detection optimization in pages and/or in components. 96 | 97 |
98 | 99 | ## Disable lazy loading 100 | 101 | By default, for better application performances, pages are generated as lazy loaded components. But you can disable lazy loading. 102 | 103 |
104 | 105 | ## Disable block CSS display 106 | 107 | Web components have an `inline` CSS display by default. It is a flaw of the standard, as 99% of components are in fact used as `block`s. So when generating components, `:host { display: block; }` is automatically added in styles, but you can disable it. 108 | 109 |
110 | 111 | ## Enable shadow DOM 112 | 113 | For projects ready to use native shadow DOM view encapsulation. 114 | 115 |
116 | 117 | ## Set the selector prefix 118 | 119 | Angular default prefix selector for components, directives and pipes is `app`. 120 | 121 | If you want a different one, this is the only setting for which the extension uses the official `angular.json` `prefix` configuration, because this one is simple to get and in an Angular CLI monorepo, it can differ from one application or library to another. 122 | 123 |
124 | Example of angular.json 125 | 126 | ```json 127 | { 128 | "version": 1, 129 | "projects": { 130 | "some-app": { 131 | "projectType": "application", 132 | "prefix": "app" 133 | }, 134 | "some-lib": { 135 | "projectType": "library", 136 | "prefix": "mycompany", 137 | } 138 | } 139 | } 140 | ``` 141 |
142 | 143 | But it requires a *valid and official* `angular.json`, which is not the case in all projects. Only such cases, set the selector prefix via the extension configuration helper. It will be global to the workspace. 144 | 145 |
146 | 147 | ## 💎 Enable classes prefixes 148 | 149 | In your Pro edition, you can enable automatic classes prefixes, for example to generate `MatButtonComponent` instead of `ButtonComponent` (given "mat" is set as the selector prefix). It is useful when doing a library of components. 150 | 151 |
152 | 153 | ## 💎 Disable classes suffixes 154 | 155 | In your Pro edition, you can disable automatic classes suffixes, for example to generate `SomeButton` instead of `SomeButtonComponent`, or `SomeApiClient` instead of `SomeApiClientService`. 156 | 157 | This option allows to partly align with the upcoming [new Angular style guide](https://gist.github.com/jelbourn/0158b02cfb426e69c172db4ec92e3c0c), being discussed in [this RFC](https://github.com/angular/angular/discussions/58412). 158 | 159 | It has also been the standard in some design systems libraries since always, like Angular Material itself (it is `MatButton`, not `MatButtonComponent`). 160 | 161 |
162 | 163 | ## 💎 Force NgModules 164 | 165 | In your Pro edition, if your project uses Angular <=13 or is not ready for standalone components yet. 166 | 167 |
168 | 169 | ## 💎 Class interceptors 170 | 171 | In your Pro edition, if your project uses Angular <=14 or is not ready for functional interceptors yet. 172 | 173 |
174 | 175 | ## 💎 Class guards and resolvers 176 | 177 | In your Pro edition, if your project uses Angular <=14.1 or is not ready for functional guards and resolvers yet. Note [class guards and resolvers are officially deprecated](https://angular.io/guide/deprecations#router-class-and-injection-token-guards) by Angular and planned for removal. 178 | 179 |
180 | 181 | ## 💎 Disable predefined schematics 182 | 183 | In your Pro edition, if some of the predefined schematics do not suit your project, you can disable them, and even replace them with your own custom schematics. 184 | 185 |
186 | 187 | ## Other guides 188 | 189 | - [Documentation homepage](./documentation.md) 190 | - [First generation](./firstGeneration.md) 191 | - [Troubleshooting](./troubleshooting.md) 192 | - [Additional schematics 💎](./advancedSchematics.md) 193 | - [Advanced options 💎](./advancedOptions.md) 194 | - [Legacy features 💎](./legacy.md) 195 | - [Custom schematics 💎](./customSchematics.md) 196 | - [Test schematics 💎](./testing.md) 197 | - [Predefined paths 💎](./predefinedPaths.md) 198 | 199 |
200 | -------------------------------------------------------------------------------- /walkthroughs/pro/customSchematics.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Create a custom schematic 💎 2 | 3 | Your Pro edition subscription allows you to create your own schematics. It is not just about saving time with some code snippets, it is also a way to enforce good practices and a whole architecture in a project. 4 | 5 | Summary: 6 | - Create your first schematic 7 | - Schematic structure 8 | - Handlebars templating 9 | - schematic.json 10 | - Schematic options 11 | - Schematic features 12 | - Share schematics between projects 13 | - Disable predefined schematics 14 | - Advanced configuration 15 | 16 |
17 | 18 | ## Create your first schematic 19 | 20 | 1. Launch the "Create a custom schematic" command 21 | 2. Choose a unique prefix (example: "mycompany") (first time only) 22 | 3. Choose a unique id (example: "angular-component") 23 | 4. Choose a human readable name (example: "Component") 24 | 5. Choose a model to start from (component, service or from scratch) 25 | 6. Edit the opened template file with the code you want to generate 26 | 27 |
28 | 29 | ## Schematic structure 30 | 31 | The steps above generate a folder with the following structure: 32 | - a `schematic.json` configuration file 33 | - a `files` subfolder with one or more Handlebars templates files (`{{fileName}}.ts.hbs`) 34 | 35 | Optionally, you can: 36 | - change the main template file name (be sure to change the `mainFile` property accordingly in `schematic.json`) 37 | - add more templates files to generate in `files` (and even subfolders) 38 | 39 |
40 | 41 | ## Handlebars templating 42 | 43 | The extension uses Handlebars (`.hbs` files) as the templating syntax, which is widely known and directly supported by VS Code. You can refer to the full [official documentation](https://handlebarsjs.com/guide), but here is a reminder of the basic syntax: 44 | 45 | Available expressions: 46 | - `{{name}}` hello-world (raw user input) 47 | - `{{fileName}}` hello-world or hello-world.suffix (kebab-cased user input) 48 | - `{{className}}` HelloWorld or HelloWorldSuffix (PascalCased user input) 49 | - `{{camelName}}` helloWorld or helloWorldSuffix (camelCased user input) 50 | - `{{options.someOption}}` value of an option defined in schematic.json 51 | 52 | Additional expression in TypeScript / JavaScript schematics: 53 | - `{{{quote}}}` " or ' (depending on Prettier / Editorconfig / VS Code configuration) 54 | 55 | Note the 3 brackets for `{{{quote}}}` is not an error: the default 2 brackets syntax in Handlebars is HTML escaping the value, so with `{{quote}}` you would end up with `"` instead of a real quote in the final generated file. 56 | 57 | Conditions: 58 | - `{{#if options.someOption}}some code{{/if}}` 59 | - `{{#unless options.someOption}}some code{{/unless}}` 60 | 61 | Available helpers: 62 | - `{{dasherize name}}` hello-world 63 | - `{{classify name}}` HelloWorld 64 | - `{{camelize name}}` helloWorld 65 | 66 | Template example: 67 | ```hbs 68 | import { Injectable } from '@angular/core'; 69 | 70 | @Injectable({ providedIn: 'root' }) 71 | export class {{className}} { 72 | 73 | constructor() {} 74 | 75 | } 76 | ``` 77 | 78 |
79 | 80 | ## schematic.json 81 | 82 | `schematic.json` required properties: 83 | - `id` (must be unique) 84 | - `label` 85 | - `collection` 86 | - `mainFile`: the file opened when generation ends (must be the exact file name that is in "files" folder, example: "{{fileName}}.ts.hbs") 87 | 88 | Optional properties: 89 | - `collection`: category shown when choosing schematics 90 | - `description`: directly visible below the schematic label 91 | - `tooltipDescription`: displayed when the user click on the "?" icon 92 | - `pathSubfolder`: should the new files be generated directly inside the destination path (example: /path/to/hello-world.component.ts), which is the default, or inside a subfolder (example: path/to/hello-world/hello-world.component.ts), which is often a better option when multiple files are generated 93 | - `suffix`: lowercased suffix for file and class names (example: "component" suffix will result in hello-world.component file name and HelloWorldComponent class name) 94 | - `dependenciesRequired`: dependencies required to enable this schematic (example: ["@angular/core"]), it only makes sense if you share schematics between projects (otherwise if you create a schematic for a specific project, you already know you want to activate it) 95 | - `features`: list of special features enabled for this schematic, see below 96 | - `options`: list of options configurable by the user, see below 97 | 98 |
99 | 100 | ## Schematic options 101 | 102 | As a general advice, **custom schematics should have as few options as possible**. For example, a `style` option to choose between CSS and SCSS makes no sense in a custom schematic, as one of the goals is to enforce one way of doing things in your project. So use directly the good style extension. Even if you plan to share schematics between projects, it will often be easier and quicker to adapt schematics in each project than to manage options. 103 | 104 | Options names must be in camelCase (example: "externalTemplate"), and must define: 105 | - `description`: as there is a display space limit, must be short; if the option is `required`, the description will be used as prompt, so it should be in the form of a question (example: "What type of style file do you want?") 106 | - `type`: `boolean`, `string` or `array` (of strings) 107 | 108 | Example: 109 | ```json 110 | { 111 | "options": { 112 | "externalTemplate": { 113 | "description": "Do you want an external template instead of an inline one?", 114 | "type": "boolean" 115 | } 116 | } 117 | } 118 | ``` 119 | 120 | String and array `type` can have a list of fixed values: 121 | - `enum` 122 | - `enumDescriptions`: optional descriptions for the `enum` values in the same order, or for boolean `type` description for true then for false 123 | 124 | Example: 125 | ```json 126 | { 127 | "options": { 128 | "style": { 129 | "description": "What type of style do you use?", 130 | "type": "string", 131 | "enum": ["css", "scss"], 132 | "enumDescriptions": ["Native CSS styles", "Sass styles"] 133 | } 134 | } 135 | } 136 | ``` 137 | 138 | Optionally, they can define: 139 | - `required`: if enabled, the option will be automatically asked to the user on generation; otherwise and by default, the option will be configurable in an optional step before the generation confirmation 140 | - `suggestToSetAsDefault`: if enabled, the UI will propose to the user to set the value chosen as the default for next generations (for now, only works for boolean `type` and string `type` with `enum`) 141 | - `default`: default value (must match the option `type`; booleans are already false by default) 142 | 143 | Then, you can use the options in your Handlebars templates files: 144 | 145 | ```hbs 146 | {{#if options.externalTemplate}}{{/if}} 147 | {{options.style}} 148 | ``` 149 | 150 | As the Handlebars mantra is "no logic in templates", you can just write conditions checking if an option is truthy or falsy, but not if an option equals a specific value. Consequently: 151 | - keep your options as simple as possible (for example, when an option has only 2 possible values, do a boolean option, not an enum) 152 | - boolean options default value should be `false` (so for example, if a schematic includes tests by default, do `skipTests` instead of doing `tests` with true as default) 153 | 154 | Also, options with `enum` will create additional expressions available in templates. 155 | 156 |
157 | Example of string enum in schematic.json 158 | 159 | ```json 160 | { 161 | "options": { 162 | "notation": { 163 | "type": "string", 164 | "enum": [ 165 | "class", 166 | "function" 167 | ] 168 | } 169 | } 170 | } 171 | ``` 172 | 173 | ```hbs 174 | {{#if options.notationFunction}}some code{{/if}} 175 | ``` 176 |
177 | 178 |
179 | Example of array enum in schematic.json 180 | 181 | ```json 182 | { 183 | "options": { 184 | "implements": { 185 | "type": "array", 186 | "enum": [ 187 | "CanActivate", 188 | "CanDeactivate" 189 | ] 190 | } 191 | } 192 | } 193 | ``` 194 | 195 | ```hbs 196 | {{#if options.implements.CanActivate}}some code{{/if}} 197 | {{#if options.implements.CanDeactivate}}some other code{{/if}} 198 | ``` 199 |
200 | 201 |
202 | 203 | ## Schematic features 204 | 205 | One of the goal of the Pro edition is to give you the ability to create your own advanced schematics (not just static code snippets) while keep it as simple as possible (unlike tools like Angular CLI). 206 | 207 | As you have seen adove, the templating syntax is very simple. Advanced operations will be handled directly by the extension via `features`. 208 | 209 | Note that some features imply to reserve some `options` names to them. 210 | 211 |
212 | 213 | ### General features 214 | 215 |
216 | exportableInEntryFile 217 | 218 | When an `index.ts` exists in the destination path or in a parent folder, the UI will automatically ask the user if the entity is public (and thus should be added to the `index.ts` exports) or private (no export); should be enabled for nearly all schematics generating an exportable entity (class, const, function,...). 219 | 220 | Options reserved: `export` 221 |
222 |
223 | 224 | ### Angular features 225 | 226 |
227 | angular 228 | 229 | Should be enabled for all Angular schematics. Activates low-level Angular features, like checking the generation is done in a project configured in `angular.json`. 230 |
231 |
232 | angularEslintComponentSuffix 233 | 234 | Should be enabled for Angular component schematics using a `suffix` different from "component" (example: "page"). If Angular ESLint is installed, it will automatically configure it to allow this suffix. 235 |
236 |
237 | angularAddComponentRoute 238 | 239 | For Angular page component schematic, will ask and add a route in the closest `.routes.ts` or `-routing.module.ts` file. 240 | 241 | By default, the page will be lazy-loaded (`loadComponent`). 242 | 243 | Options reserved: `route`, `eagerLoading` 244 |
245 |
246 | angularSelectorCamelCase 247 | 248 | For Angular directives and pipes schematics, camelCased `{{selector}}` will be available in templates. 249 | 250 | Options reserved: `selectorPrefix` 251 |
252 |
253 | angularSelectorKebabCase 254 | 255 | For Angular components schematics, kebab-cased `{{selector}}` will be available in templates. 256 | 257 | Options reserved: `selectorPrefix` 258 |
259 |
260 | angularImportsInsideComponent 261 | 262 | For Angular standalone component schematics, will ask the user if they want to import something (like CommonModule, FormsModule, MatXModule, Prime, IonicModule...). 263 | 264 | Option reserved: `imports` 265 |
266 |
267 | angularAddInterceptorProvider 268 | 269 | For Angular interceptors schematics, will add the provider. 270 |
271 | 272 |
273 | 274 | ### Deprecated Angular features 275 | 276 | Angular 15 introduced standalone components to get rid of NgModules. Thus the following features should be avoided. 277 | 278 |
279 | angularAddToModuleDeclarations 280 | 281 | Should be enabled for all legacy Angular component, directive and pipe schematics. Will automatically declare the component, directive or pipe in the closest `NgModule`. 282 | 283 | Option reserved: `skipDeclaration` 284 |
285 |
286 | angularImportGeneratedModuleIntoOtherModules 287 | 288 | For Angular modules of declarations schematics, will ask the user where to import the generated module. 289 | 290 | Option reserved: `modules` 291 |
292 |
293 | angularImportLazyModuleIntoOtherRoutingModule 294 | 295 | For Angular modules of lazy-loaded routing schematics, will ask the user where to import the generated module. 296 | 297 | Options reserved: `module`, `route` 298 |
299 |
300 | 301 | ## Share schematics between projects 302 | 303 | Schematics are just files like any library, so you can copy/paste them, but also publish them on npm or any other public or private registry, to share them between projects. Then, in your VS Code settings. 304 | 305 | ```json 306 | { 307 | "angular-schematics.additionalSchematics": "./node_modules/@mycompany/schematics" 308 | } 309 | ``` 310 | 311 |
312 | 313 | **Disable predefined schematics** 314 | 315 | If you want to replace a schematic already existing in the extension by your own, you can use the configuration helper to disable predefined schematics. But as one the goals of the extension is to provide sensible defaults and good practices, be sure you know what you do. 316 | 317 |
318 | 319 | ## Advanced configuration 320 | 321 |
322 | 323 | **Local schematics prefix** 324 | 325 | When you create your first custom schematic, a prefix will be asked, because schematics ids must be unique. It will be remembered for the next schematics creation. You can change it at any time in your VS Code settings. 326 | 327 |
328 | Example of custom setting 329 | 330 | ```json 331 | { 332 | "angular-schematics.localSchematicsPrefix": "mycompany" 333 | } 334 | ``` 335 |
336 | 337 |
338 | 339 | **Local schematics path** 340 | 341 | By default, new schematics will be created in a `schematics` folder. It is recommended to keep the default value, but you can change the path in your VS Code settings. 342 | 343 |
344 | Example of custom setting 345 | 346 | ```json 347 | { 348 | "angular-schematics.localSchematicsPath": "./some-other-folder" 349 | } 350 | ``` 351 |
352 | 353 |
354 | 355 | ## Other guides 356 | 357 | - [Documentation homepage](./documentation.md) 358 | - [First generation](./firstGeneration.md) 359 | - [Troubleshooting](./troubleshooting.md) 360 | - [Configuration](./configuration.md) 361 | - [Additional schematics 💎](./advancedSchematics.md) 362 | - [Advanced options 💎](./advancedOptions.md) 363 | - [Legacy features 💎](./legacy.md) 364 | - [Test schematics 💎](./testing.md) 365 | - [Predefined paths 💎](./predefinedPaths.md) 366 | 367 |
368 | -------------------------------------------------------------------------------- /walkthroughs/pro/documentation.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Documentation 2 | 3 | This documentation is a copy of the integrated documentation included directly in Visual Studio Code, for alternative editors which do not support the VS Code "walkthrough" feature. 4 | 5 | It should be used only in this case. Otherwise, the integrated documentation in VS Code is much better because it includes direct links to launch the adequate commands with just a click. 6 | 7 | **You can access the integrated documentation at any time from the Angular logo on the left sidebar**, or from the VS Code menu: 8 | 1. View 9 | 2. Command Palette 10 | 3. search "Documentation" 11 | 4. choose "Angular Schematics: Documentation and tutorial" 12 | 13 | ## Pro edition 💎 14 | 15 | You have subscribed to the Pro edition, thank you! 💖 16 | 17 | It gives you access to all the features of this extension. You will find details about these features in the next steps of this walkthrough. 18 | 19 | ## Table of contents 20 | 21 | - [First generation](./firstGeneration.md) 22 | - [Troubleshooting](./troubleshooting.md) 23 | - [Configuration](./configuration.md) 24 | - [Additional schematics 💎](./advancedSchematics.md) 25 | - [Advanced options 💎](./advancedOptions.md) 26 | - [Legacy features 💎](./legacy.md) 27 | - [Custom schematics 💎](./customSchematics.md) 28 | - [Test schematics 💎](./testing.md) 29 | - [Predefined paths 💎](./predefinedPaths.md) 30 | 31 |
-------------------------------------------------------------------------------- /walkthroughs/pro/firstGeneration.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - First generation 2 | 3 | Let us generate a very basic class file. 4 | 5 |
6 | 7 | ## Check Git status 8 | 9 | While this extension mainly *add* new files, it can also *modify* existing files. For example, when generating an Angular page, the nearest routing file will be updated to add the route. 10 | 11 | So before launching a new generation, **it is strongly recommended to check that the Git status is clean** (or any other Source Control Manager), which means there is no uncommitted files. 12 | 13 | It will allow you to easily and quickly revert the generation if needed. 14 | 15 |
16 | 17 | ## Automatic path detection 18 | 19 | One of the main pain points of generation tools done via command lines (like Angular CLI) is that you must type the full path to where you want to generate something. It is very tedious and typos often happen. 20 | 21 | This extension makes it quick and easy. **Just right-click on the folder you want: no command line, and the path is pre-filled.** 22 | 23 |
24 | 25 | ## Generate a class 26 | 27 | 1. Go to the Explorer view and **right-click on the destination folder of your choice** 28 | 2. Click on **"Angular Schematics: Generate a file"*** 29 | 3. Choose the "Class" schematic* 30 | 4. Just type a name (the path is already inferred) 31 | 5. Confirm 32 | 33 | \* See the troubleshooting guide in the next walkthrough step if you do not see this option. 34 | 35 |
36 | 37 | ## File auto opening 38 | 39 | If the generation succeeded, **the generated file is opened automatically**: just start coding! 40 | 41 | If the command failed, see troubleshooting in the next walkthrough step. 42 | 43 |
44 | 45 | ## Other schematics 46 | 47 | You can now try any other schematics: 48 | - service 49 | - standalone component 50 | - standalone directive 51 | - standalone pipe 52 | - functional guard 53 | - functional resolver 54 | - functional interceptor 55 | - interface 56 | - class 57 | 58 | And your Pro edition subscription also includes: 59 | - page 60 | - routes 61 | - synchronous reactive service with signal 62 | - asynchronous reactive service with RxJS 63 | - legacy component, directive and pipe with NgModules 64 | - legacy class guard, resolver and interceptor 65 | - Material (dialog, table) 66 | - Jasmine / Jest unit test 67 | 68 | If you do not see some schematics, see the troubleshooting guide in the next walkthrough step. 69 | 70 |
71 | 72 | ## Other guides 73 | 74 | - [Documentation homepage](./documentation.md) 75 | - [Troubleshooting](./troubleshooting.md) 76 | - [Configuration](./configuration.md) 77 | - [Additional schematics 💎](./advancedSchematics.md) 78 | - [Advanced options 💎](./advancedOptions.md) 79 | - [Legacy features 💎](./legacy.md) 80 | - [Custom schematics 💎](./customSchematics.md) 81 | - [Test schematics 💎](./testing.md) 82 | - [Predefined paths 💎](./predefinedPaths.md) 83 | 84 |
85 | -------------------------------------------------------------------------------- /walkthroughs/pro/legacy.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Legacy schematics 💎 2 | 3 | Your Pro edition subscription includes the following legacy schematics: 4 | - component with NgModules 5 | - page with NgModules 6 | - directive with NgModules 7 | - pipe with NgModules 8 | - NgModule of routing 9 | - NgModule of declarations (components, directives, pipes) 10 | - Class guard 11 | - Class resolver 12 | - Class interceptor 13 | 14 |
15 | 16 | ## NgModules 17 | 18 | If your project uses Angular <=13 or is not ready for standalone components yet. 19 | 20 | To activate these schematics, force NgModules in the configuration helper. 21 | 22 |
23 | 24 | ## Class interceptors 25 | 26 | If your project uses Angular <=14 or is not ready for functional interceptors yet. 27 | 28 | OTo activate these schematics, force class interceptors in the configuration helper. 29 | 30 |
31 | 32 | ## Class guards and resolvers 33 | 34 | If your project uses Angular <=14.1 or is not ready for functional guards and resolvers yet. Note [class guards and resolvers are officially deprecated](https://angular.io/guide/deprecations#router-class-and-injection-token-guards) by Angular and planned for removal. 35 | 36 | To activate these schematics, force class guards and resolvers in the configuration helper. 37 | 38 |
39 | 40 | ## Other guides 41 | 42 | - [Documentation homepage](./documentation.md) 43 | - [First generation](./firstGeneration.md) 44 | - [Troubleshooting](./troubleshooting.md) 45 | - [Configuration](./configuration.md) 46 | - [Additional schematics 💎](./advancedSchematics.md) 47 | - [Advanced options 💎](./advancedOptions.md) 48 | - [Custom schematics 💎](./customSchematics.md) 49 | - [Test schematics 💎](./testing.md) 50 | - [Predefined paths 💎](./predefinedPaths.md) 51 | 52 |
53 | -------------------------------------------------------------------------------- /walkthroughs/pro/predefinedPaths.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Predefined paths 💎 2 | 3 | Your Pro edition subscription allows you to assign a specific schematic to a path. Why? 4 | - saves time (one less step when generating) 5 | - allows to enforce an architecture 6 | 7 |
8 | 9 | ## Predefined paths configuration 10 | 11 | In your projects, you probably follow some kind of architecture. Let us keep it simple and say you put components in `src/app/components` and services in `/src/app/services`. 12 | 13 | With your Pro edition, you can predefine the schematic associated to those folders. That will be one less step when generating a component or service. 14 | 15 | VS Code settings example: 16 | 17 | ```json 18 | { 19 | "angular-schematics.pathsWithPredefinedSchematic": [{ 20 | "path": "src/app/components", 21 | "schematicId": "angular-component" 22 | }, { 23 | "path": "src/app/services", 24 | "schematicId": "angular-service" 25 | }] 26 | } 27 | ``` 28 | 29 |
30 | 31 | ## Enforce architecture 32 | 33 | But it is not just about saving time. Are you the team lead? You can also **enforce these architecture settings**, to force your whole team to stay on track. 34 | 35 | Combine that with the custom schematics feature, and you can **enforce how all things are done in the project**. 36 | 37 | VS Code settings example: 38 | 39 | ```json 40 | { 41 | "angular-schematics.pathsWithPredefinedSchematic": [{ 42 | "path": "src/app/components", 43 | "schematicId": "angular-component" 44 | }, { 45 | "path": "src/app/services", 46 | "schematicId": "angular-service" 47 | }, { 48 | "path": "src/app/pages", 49 | "schematicId": "angular-page" 50 | }], 51 | "angular-schematics.enforceArchitecture": "error" 52 | } 53 | ``` 54 | 55 | `enforceArchitecture` accepts: 56 | - `error`: will restrict generation in other paths 57 | - `warn`: will warn the user but allows to do it anyway 58 | 59 |
60 |
61 | 62 | ### Multiple schematics allowed 63 | 64 | VS Code settings example: 65 | ```json 66 | { 67 | "angular-schematics.pathsWithPredefinedSchematic": [{ 68 | "path": "src/app/core-declarations", 69 | "schematicId": [ 70 | "angular-component", 71 | "angular-directive", 72 | "angular-pipe" 73 | ] 74 | }] 75 | } 76 | ``` 77 | 78 |
79 | 80 | ### Globs 81 | 82 | VS Code settings example: 83 | 84 | ```json 85 | { 86 | "angular-schematics.pathsWithPredefinedSchematic": [{ 87 | "path": "src/app/**/pages", 88 | "schematicId": "angular-page" 89 | }] 90 | } 91 | ``` 92 | 93 | `minimatch` library is used, you can refer to [its documentation](https://github.com/isaacs/minimatch). 94 | 95 | Be careful to not to define overlapping paths, otherwise the first match will be used. 96 | 97 |
98 | 99 | ### List of schematicsId 100 | 101 | The list of schematics ids will be suggested on autocomplete, but here is a full list: 102 | 103 | - angular-service 104 | - angular-component 105 | - angular-page 106 | - angular-directive 107 | - angular-pipe 108 | - angular-sync-reactive-service 109 | - angular-async-reactive-service 110 | - angular-guard 111 | - angular-interceptor 112 | - angular-resolver 113 | - angular-unit-test 114 | - typescript-interface 115 | - typescript-class 116 | 117 |
118 | 119 | ## Other guides 120 | 121 | - [Documentation homepage](./documentation.md) 122 | - [First generation](./firstGeneration.md) 123 | - [Troubleshooting](./troubleshooting.md) 124 | - [Configuration](./configuration.md) 125 | - [Additional schematics 💎](./advancedSchematics.md) 126 | - [Advanced options 💎](./advancedOptions.md) 127 | - [Legacy features 💎](./legacy.md) 128 | - [Custom schematics 💎](./customSchematics.md) 129 | - [Test schematics 💎](./testing.md) 130 | 131 |
132 | -------------------------------------------------------------------------------- /walkthroughs/pro/testing.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Test schematics 💎 2 | 3 | Your Pro edition subscription includes test schematics. 4 | 5 | ## Unit testing done right 6 | 7 | By default, Angular CLI adds a spec file for each thing you generate. It is questionable for several reasons: 8 | - in an application, e2e tests should be the focus and priority, not unit tests 9 | - in front-end, trying to unit test everything is not relevant and is counter productive 10 | - it pollutes the project with even more files than there already is 11 | 12 | With your Pro edition, you can **generate spec files only when relevant**: just right-click your component / service / whatever, choose the "Unit test" schematic, and the according unit test will be added! 13 | 14 | The current unit test schematic supports: 15 | - Jasmine 16 | - Jest 17 | 18 |
19 | 20 | ## Other guides 21 | 22 | - [Documentation homepage](./documentation.md) 23 | - [First generation](./firstGeneration.md) 24 | - [Troubleshooting](./troubleshooting.md) 25 | - [Configuration](./configuration.md) 26 | - [Additional schematics 💎](./advancedSchematics.md) 27 | - [Advanced options 💎](./advancedOptions.md) 28 | - [Legacy features 💎](./legacy.md) 29 | - [Custom schematics 💎](./customSchematics.md) 30 | - [Predefined paths 💎](./predefinedPaths.md) 31 | 32 |
33 | -------------------------------------------------------------------------------- /walkthroughs/pro/troubleshooting.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Troubleshooting 2 | 3 | Here is a list of common issues. 4 | 5 |
6 | 7 | ## Requirements 8 | 9 | Using outdated versions of tools can cause issues. The extension is tested with the last 2 versions of Visual Studio Code. It may work with previous versions but it is not guaranteed. 10 | 11 |
12 | 13 | ## I do not see "Generate a file" in the context menu 14 | 15 | Given what this extension does (runtime scripts, file generation,...), it is only enabled in [trusted workspaces](https://code.visualstudio.com/docs/editor/workspace-trust). 16 | 17 | The first time you open a new folder in VS Code, you are asked if you trust the folder. Say "Yes" for your own projects. If you previously said "No" by mistake, you can change it with the "Workspaces: Manage workspace trust" command. 18 | 19 |
20 | 21 | ## I do not see Angular schematics 22 | 23 | This extension will only display the schematics and options relevant to your project. It does so by detecting the dependencies (for example `@angular/core`) in `package.json`. It will look into: 24 | - `package.json` at the root of the opened folder 25 | - `package.json` in parent folders of the opened folder (monorepo case) 26 | - `package.json` in nested subfolders (like .NET or Java projects) 27 | 28 | Only if you have a special configuration and nothing else is possible, you can use the configuration helper to force the dependencies detected. 29 | 30 |
31 | 32 | ## The path is wrongly infered 33 | 34 | VS Code [combines single folders together](https://code.visualstudio.com/updates/v1_41#_compact-folders-in-explorer) by default. It is annoying with this extension, as clicking on the right directory becomes more confusing. 35 | 36 | So you should consider disabling the `Compact Folders` VS Code *workspace* setting. 37 | 38 |
39 | 40 | ## Extension logs 41 | 42 | The extension is logging some debug information. You can see the logs: from the VS Code menu > View > Output > select "Angular Schematics - Logs" from the dropdown. 43 | 44 |
45 | 46 | ## Support 47 | 48 | If it still does not work, you can ask a question on [GitHub discussions](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions). 49 | 50 |
51 | 52 | ## Other guides 53 | 54 | - [Documentation homepage](./documentation.md) 55 | - [First generation](./firstGeneration.md) 56 | - [Configuration](./configuration.md) 57 | - [Additional schematics 💎](./advancedSchematics.md) 58 | - [Advanced options 💎](./advancedOptions.md) 59 | - [Legacy features 💎](./legacy.md) 60 | - [Custom schematics 💎](./customSchematics.md) 61 | - [Test schematics 💎](./testing.md) 62 | - [Predefined paths 💎](./predefinedPaths.md) 63 | 64 |
65 | -------------------------------------------------------------------------------- /walkthroughs/testing.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Test schematics 2 | 3 | > 💎 **Pro edition** 4 | > 5 | > You love this extension? Thank you! But it represents months of *unpaid* work by a single contributor. So this feature is only available in the Pro Edition. 6 | > 7 | > **[Learn more about the Pro edition and try it for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 8 | > 9 | > ⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time. 10 | 11 |
12 | 13 | ## Unit testing done right 14 | 15 | By default, Angular CLI adds a spec file for each thing you generate. It is questionable for several reasons: 16 | - in an application, e2e tests should be the focus and priority, not unit tests 17 | - in front-end, trying to unit test everything is not relevant and is counter productive 18 | - it pollutes the project with even more files than there already is 19 | 20 | With the Pro edition, you can **generate spec files only when relevant**: just right-click your component / service / whatever, choose the "Unit test" schematic, and the according unit test will be added! 21 | 22 | The current unit test schematic supports: 23 | - Jasmine 24 | - Jest 25 | 26 |
27 | 28 | 💎 **[Try the Pro edition for free](https://cyrilletuzi.gumroad.com/l/schematicspro/1million)** 💎 29 | 30 |
31 | 32 | ## Other guides 33 | 34 | - [Documentation homepage](./documentation.md) 35 | - [First generation](./firstGeneration.md) 36 | - [Troubleshooting](./troubleshooting.md) 37 | - [Configuration](./configuration.md) 38 | - [Additional schematics 💎](./advancedSchematics.md) 39 | - [Advanced options 💎](./advancedOptions.md) 40 | - [Legacy features 💎](./legacy.md) 41 | - [Custom schematics 💎](./customSchematics.md) 42 | - [Predefined paths 💎](./predefinedPaths.md) 43 | 44 |
-------------------------------------------------------------------------------- /walkthroughs/troubleshooting.md: -------------------------------------------------------------------------------- 1 | # Angular Schematics - Troubleshooting 2 | 3 | Here is a list of common issues. 4 | 5 |
6 | 7 | ## Requirements 8 | 9 | Using outdated versions of tools can cause issues. The extension is tested with the last 2 versions of Visual Studio Code. It may work with previous versions but it is not guaranteed. 10 | 11 |
12 | 13 | ## I do not see "Generate a file" in the context menu 14 | 15 | Given what this extension does (runtime scripts, file generation,...), it is only enabled in [trusted workspaces](https://code.visualstudio.com/docs/editor/workspace-trust). 16 | 17 | The first time you open a new folder in VS Code, you are asked if you trust the folder. Say "Yes" for your own projects. If you previously said "No" by mistake, you can change it with the "Workspaces: Manage workspace trust" command. 18 | 19 |
20 | 21 | ## I do not see Angular schematics 22 | 23 | This extension will only display the schematics and options relevant to your project. It does so by detecting the dependencies (for example `@angular/core`) in `package.json`. It will look into: 24 | - `package.json` at the root of the opened folder 25 | - `package.json` in parent folders of the opened folder (monorepo case) 26 | - `package.json` in nested subfolders (like .NET or Java projects) 27 | 28 | Only if you have a special configuration and nothing else is possible, you can use the configuration helper to force the dependencies detected. 29 | 30 |
31 | 32 | ## The path is wrongly infered 33 | 34 | VS Code [combines single folders together](https://code.visualstudio.com/updates/v1_41#_compact-folders-in-explorer) by default. It is annoying with this extension, as clicking on the right directory becomes more confusing. 35 | 36 | So you should consider disabling the `Compact Folders` VS Code *workspace* setting. 37 | 38 |
39 | 40 | ## Extension logs 41 | 42 | The extension is logging some debug information. You can see the logs: from the VS Code menu > View > Output > select "Angular Schematics - Logs" from the dropdown. 43 | 44 |
45 | 46 | ## Support 47 | 48 | If it still does not work, you can ask a question on [GitHub discussions](https://github.com/cyrilletuzi/vscode-angular-schematics/discussions). 49 | 50 |
51 | 52 | ## Other guides 53 | 54 | - [Documentation homepage](./documentation.md) 55 | - [First generation](./firstGeneration.md) 56 | - [Configuration](./configuration.md) 57 | - [Additional schematics 💎](./advancedSchematics.md) 58 | - [Advanced options 💎](./advancedOptions.md) 59 | - [Legacy features 💎](./legacy.md) 60 | - [Custom schematics 💎](./customSchematics.md) 61 | - [Test schematics 💎](./testing.md) 62 | - [Predefined paths 💎](./predefinedPaths.md) 63 | 64 |
65 | --------------------------------------------------------------------------------