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 theapporlibsource 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/angulardependencies in the projectnode_modulesis 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. 🎉