Angular, the most used and popular TypeScript framework for web development, got another update recently. Have you checked it yet? If not, you are missing out on some outstanding features that come with the newly released version of Angular 15 that promises to make your web development experience better than before.
We are covering a complete overview of the angular latest version and its features. Make sure you read till the end if you are planning to upgrade soon.
After the massive success of Angular 14 which was released on 2nd June 2022, Google quickly launched a new version of Angular on 16 November last year. That came not at all as a surprise for developers as the platform release updates every 6 months.
The latest angular version comes with more new, improved, and effective features that make debugging simpler, refactoring of component-based material, code reusable, and so on. Let us check each feature one by one below.
Here are angular features -
By introducing standalone components in the new version, Angular has made NgModule optional. Now, developers can easily build standalone components without creating and updating NgModule. These components are stable, self-contained, and can manage template dependencies on their own. They can also be packaged, reused, and lazy loaded on their own. Standalone components are accessible across the Angular framework and can be used in the router, angular elements, HttpClient, etc.
With this new introduction, developers get a more simplified view of the code. Learning angular framework has also become simplified for fresh developers as they don’t have to understand multiple concepts for making components.
Angular has fulfilled the long-waited request for directives reusability that developers demanded on the GitHub community platform. They have been waiting for this feature so that they can reuse behaviours of directive API without making them appear in public API or without any inheritance.
Now they can, as the Angular new version has a directive composition API as a new feature that allows code reusability. However, it works only with standalone directives.
The latest angular version V15 improves image optimization with its image directive feature that it has developed along with Chrome Aurora in v14.2. The feature was experimented with by Land’s End and gave a stable response.
What it does is, allow Angular dev to use image directives with standalone components as well as NgModules. Using this feature is also easy, all you need to do is add a NgSource in the image code for optimization.
Automatically generated srcset, another angular 15 feature in image directive, is very useful as it reduces the download time of images. It also ensures that images with the appropriate size are downloaded. In addition to it, you don’t have to know the width and height of images. The fill mode feature eliminates this requirement and automatically fills in the details.
Overall, it improves the LCP score making the page more useful and quickly accessible.
Making a multi-route application in angular has now become easier and more secure with this new update. The developers can even remove any unused features during the build-time itself. Thanks to the tree-shakeable standalone router API that now the code can be made less bulky and the boilerplate in guards can be reduced.
In a recent developer satisfaction survey, the Angular team found out that debugging was one of the challenges they face. There was a lot of confusion regarding error messages making it a valuable area to improve in the angular current version.
With the support of Chrome DevTools, Angular resolved this issue by making stack traces more meaningful and relevant. What does it mean? In the new version, when you perform debugging you get a simplified error message with stack traces only linked to the code frames you altered.
The best thing about it is you don’t have to step into angular runtime while setting breakpoints. Chrome DevTools are there to support you further.
Angular current version v15 further reduces the boilerplate and burden on the router with its auto-unwrapping feature. It unwraps the default exports automatically while loading components or modules.
Refactoring is a crucial technique in angular especially when you are building big applications. However, refactoring component-based material was quite difficult since the start and was not at all resolved in Angular 14.
In V15, the Angular team refactored the components to MDC (material design components for the web) by improving their CSS and internal DOM structure. For a few components, they have written fresh code without making any changes to directive selectors and TypeScript APIs.
On the other hand, some components like slider, chips, list, and form-field got major changes in their APIs so integration with MDC is possible.
Refactoring of the old components has thus enhanced the component accessibility, and ability to quickly adopt the new changes in the Material Design spec as the components now have a common infrastructure.
However, you can still use the old implementations for new components by using legacy import.
One of the best angular 15 features is CDK listbox. The module has a collection of behaviour primitives using which developers can build custom UI components. With this, developers can make a custom component to behave exactly as desired. Component styling is easier as it has CSS classes for different directives. Furthermore, each directive has an aria attribute according to the given option values.
CDK listbox also supports one option at a time or multiple selected options that you can add using cdkListboxMultiple. With the help of this new update in Angular 15, you can choose between template-driven and reactive forms for the listbox. If you want to add disable options like age factor for a user filling the form, CDK listbox lets you add such option too. Your custom listbox can also have forms validation, keyboard navigation options, custom typeahead, etc.
Webpack has been the most popular module bundler tool among developers because of its incredible flexibility and core bundling strategy. However, speed and configuration complexity pulled it backward.
As an alternative option, angular switched to esbuild in the angular 14 version. This new-era build tool is written in the Go language and offers lightning-fast speed. The current angular version offers the same with file replacement, SVG template, Sass, and ngbuild watch support in the esbuilder tool.
The angular current version also got an automatic import feature in the language service. Using it, developers can now import any component being used in a template automatically.
Furthermore, a few things have been deprecated to enhance the developer experience and simplify the framework. providedIn: ‘any’ and providedIn: NgModule are now phased out from the current angular version.
A few aspects are replaced as well.
These are DATE_PIPE_DEFAULT_TIMEZONE which is replaced by DATE_PIPE_DEFAULT_OPTIONS to define the time zone, Injector. get () and Testbed. Inject() are switched with InjectOptions, and the RouterLinkWithHref directive has been replaced with the RouterLink directive. Also, the @angular/flex-layout will not have any new releases. Above mentuoned are Angular 15 new features.
These 10 angular 15 features are not the only updates in the latest version which will affect your angular application. Here are a few more changes that you’d see:
1. The framework has dropped its support for the following node.js versions- versions 14.15 to 14.19 versions and for version 16 it no longer supports 16.10, 16.11, and 16.12. Angular v15 supports only 14.20. x, 16.13.x, and 18.10.x node.js versions.
2. If you are using a TypeScript version older than 4.8, consider updating it as v15 will not support it.
3. Another important change in v15 is in the names of @keyframes. It will now have a scope name as a prefix.
4. When using a constructor for dependency injection purposes, the compiler will display an error showing the constructor as invalid in the angular new version. You can resolve this issue by adding an explicit constructor or decorating the base class.
5. Using a ControlValueAccessor will always call up the setDisabledState in v15. Use FormsModule.withConfig or ReactiveFormsModule.withConfig to avoid this.
6. You can no longer use canParse method as it is removed in the updated version of Angular. Instead, using hint and analyze parameter is mandatory now.
7. For ActivatedRouteSnapshot, use the title property in v15.
8. Angular has phased out the enableIvy option in the compiler
9. Like in earlier Angular versions, you cannot opt out of a bug fix using relativeLinkResolution in the current angular version since it has been dismantled.
10. Changes are made in router navigation as well. Now, the RouterOutlet does not show the activated component during navigation rather the instantiation will happen after the change detection is run. However, this new change can affect the production code under tests especially if it does not trigger change detection.
Make sure you are using the angular new version if you want to use all these features and make your angular application perform smoothly. Irrespective of the version you are using, you can update it to angular v15.
1. Uninstall the current node.js version you are using and install the latest version. This is a basic requirement for the system setup. Check the above section to learn the current node.js version supported by Angular v15.
2. Next, upgrade the angular CLI version. Use the ng update @angular/cli @angular/core command for the update and check the ng version once it's done. You can even uninstall the current version and install a new one using the npm install-g @angular/cli command.
3. For the third step, go to the official website of angular i.e., www.angular.io. Search for the angular update guide from update angular to the latest version option from the menu at the left.
4. Select the angular current version you are using, let’s say it's v14.0 and you want to switch to v15.0. (Make sure your angular current version is not older than v14, otherwise, you cannot directly upgrade to the Angular v15. First, you will have to the update version above it.)
5. Choose whether your application is basic, medium, or advanced and any other dependencies your application has from the given options.
6. Hit the show me how to update button and execute all the commands to install the angular latest version.
Angular wants to provide a stable web ecosystem for the developers and thus keep on making improvements according to the issues faced by them. The latest version is the result of those efforts and it got slightly updated to v15.1 in the first week of 2023.
In the upcoming months, angular developers can expect the release of v15.2 and v16.0 which are planned for this year. If you are wondering what they will have next, let us give you a hint. The new ones may have improvements for server-side rendering.
Also read - Why Outsource Angular Development Services Overseas
Subscribe to our newsletter
Join our newsletter to get the latest news, update, and special offers delivered directly in your inbox.
