Preparation for standalone components being the default in Angular 19.
- Alternative way to access the documentation in alternative editors like Cursor which do no support the VS Code "walkthrough" feature.
- 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
. - In the Pro edition, fix a case where custom schematics' file names were incorrect, like
some-name..component.ts
, when suffix is empty.
In the Pro edition, simplify the Angular Material schematic, and promote it to stable.
- Preparation for standalone components being the default in Angular 19.
- VS Code >= 1.92 is now required. The extension may still work in older versions, but they are not tested anymore.
- Fixes an issue which was breaking the "Create a custom schematic" button in the Pro edition, and the generation from the Command Palette.
New schematics for Angular Material in the Pro edition:
- type safe dialog,
- type safe table.
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.
New schematic for routes in the Pro edition. Note that:
- they are lazy-loaded by default, but you can use the configuration helper to use eager-loading instead
- as a consequence, legacy schematic for routes with NgModule has been renamed from
angular-module-routing
toangular-routes
1 million installations celebration! If you did not try the Pro edition yet, now is the time.
VS Code >= 1.90 is now required. The extension may still work in older versions, but they are not tested anymore.
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.
When generating a standalone component:
- imports list now includes Ionic standalone components and directives for projects using Ionic Angular >= 7.5 (official documentation here)
When generating a standalone component:
- 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)
- imports list is sorted better
Add Kendo Angular modules in imports list when generating a standalone component.
"Copy angular.json settings" in the configuration helper now takes into account settings from some alternative schematics (like @ionic/angular-toolkit
).
angular.json configuration management has been enhanced:
- angular.json in a subfolder is now supported
- rely on
sourcePath
, as not all projects respect theapp
orlib
source subfolder
It means:
- "Copy angular.json settings" in the configuration helper now works in more scenarios
- "Limited generation" warning should happen less frequently and only when relevant
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.
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.
Added skipStyle
option for component and page schematics, which can be useful if your project uses Tailwind CSS.
It can be set in a click with the configuration helper, accessible from the Angular logo in the left sidebar.
Fixes a bug in component with NgModule schematic where skipChangeDetectionOnPush
was not honored.
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:
- @ngx-translate/core
- @ng-select/ng-select
- @ng-bootstrap/ng-bootstrap
- ngx-bootstrap
- @asymmetrik/ngx-leaflet
- @ngxs/form-plugin
- angular-gridster2
- highcharts-angular
- ng-zorro-antd
- ng2-charts
- ng2-dragula
- ng2-file-upload
- ngx-clipboard
- ngx-color-picker
- ngx-countdown
- ngx-echarts
- ngx-file-drop
- ngx-highlightjs
- ngx-infinite-scroll
- ngx-pagination
- ngx-quill
- ngx-spinner
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, with the "Pro edition - New standalone import" form.
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.
Better Pro edition onboarding:
- places with "Try the Pro edition" are cleaned up once your license is activated
- a "Create a custom schematic" button has been added in the sidebar panel, accessible from the Angular logo in the left sidebar
Fixes:
- a VS Code issue where the custom schematic creation command would fail in multi-workspaces projects
- standalone components imports picker not showing in projects without a valid
angular.json
- some Pro edition features (like standalone components imports picker) still locked despite having activated a license
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.
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.
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:
- installing Angular CLI globally is no longer needed
- having
@schematics/angular
dependencies in the projectnode_modules
is no longer needed - alternate package managers fantasies do not get in the way anymore
- terminal nightmare ends: no more shells, configurations or permissions issues
angular.json
, while still recommended, is no longer needed
Also, it is faster.
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.
The main differences you will notice are:
- inline HTML template by default
- change detection optimization (
OnPush
) by default :host { display: block; }
by default in pure components- no spec file by default
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.
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:
- enable SCSS styles
- enable single file components
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:
- View
- Command Palette
- search "Documentation"
- choose "Angular Schematics: Documentation and tutorial"
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.
It is months of unpaid work by a single contributor.
So you will see some new features marked with a diamond 💎. It means they are only available in the Pro edition.
Feel free to enjoy advanced features and support a contributor at the same time! 💖
- additional schematics (page, reactive services, unit tests,...)
- advanced options (imports for standalone components, entry files exports,...)
- legacy schematics (components with NgModules, class guards,...)
- custom schematics in a much simpler way than with the Angular CLI
- predefined paths to enforce an architecture
You will find details about all these features directly in the extension documention.
💎 Try the Pro edition for free 💎
And to celebrate the Angular renaissance, price is currently 50% off. 🎉