Angular 15 features: What Is New in the Update?
25.03.2023
The current Angular 15 features are some of the most significant upgrades on the framework so far, which makes some believe Angular out-competes alternatives. Its features solve different pain points developers face in Angular 14. Some of these features include better stability, new API systems, single-file components, and ESbuid support with which our Angular development companies can support your business apps.
According to a senior Angular developer, updating to Angular 15 is one of the most significant and exciting releases he came across in 2022. Google built Angular 15 to achieve “better developer experience and performance” for developers, says Minko Gechev, Google’s Head of Product, Angular. Why does he say so? That’s what we’re here to explore.
What are the New Features of Angular 15?
The new features of Angular 15 include:
- Stable standalone APIs
- Introducing a New API System
- Debugging Made Easy With Improved Stack Traces
- Improved Experimental ESbuild Support
- Single File Components
- More Stable Image Directives
- Stabilized MDC-Based Components
Stable Standalone APIs
One problem with Angular 14 was that there needed to be more stability for the APIs. As Google released the Standalone APIs with Angular 14, it only released them in developer preview, making it easier for developers to build apps without Ng Modules.
In the developer preview, the standalone APIs were free from the LTS (Long-Term Support) that applied to existing APIs. This made it possible to get regular updates that led to developers finally getting a stable version.
Angular 15 switches it up – graduating from developer preview, these Standalone APIs are much more stable and allow bootstrapping an app in a single component. This means you can load all the essential elements of the application in one component. You can load the index.html page as the start point, Angular libraries, execute the main.ts file, load app-level and components, and then process.
Creating Angular apps from Standalone Components, directives, pipes, and APIs is more straightforward than before. Finally, Standalone APIs also conveniently sync with other Angular Elements and HttpClient.
Below is an image of an Angular interface showing how codes worked with the use of NgModule. It features how it appears before Standalone APIs were launched, as well as how they work without Standalone APIs.
Introducing a New API System
Angular developers have been requesting a new API that will provide reusability of directives that they can always rely on, and Google listened to their requests.
The Directive Composition API in Angular 15 allows developers to boost the host elements of apps with directives. The code reuse strategy lets developers get the most out of the Angular framework. You’ll enjoy a higher level of code usability, so you can interact with APIs in your app without going through the hassle of writing code repeatedly for every endpoint.
This system also makes it easier for developers to use the modules provided. The previous Angular versions had absolutely no built-in support for modules. Wild, right? However, remember that you can only use this Directive Composition API with standalone directives on the framework.
Debugging Made Easy With Improved Stack Traces
Debugging was one of the most common problems in the Angular framework. Stack errors were tough to trace as the error messages were unclear or hard to understand, leading developers to lengthy bug-solving processes.
The Angular team at Google noted the complaints and simplified the finding and understanding of stack errors. Angular 15 features code-focused error messages rather than error messages from third-party dependencies.
Now, the error messages provide transparent information about the location where the code has an error. As a result, you’re led to that part of the code you need to debug or fix immediately.
Improved Experimental ESbuild Support
First released in Angular 14, the team introduced this support to give developers faster pipeline simplifications and build time. “It (ESbuild Support) almost halved the build time” when a Google developer, Fabio Biondi, tried it on a small Angular project.
With Angular 15, developers get experimental SVG templates, Sass, ngbuild-watch support, and file replacement feature, as the Angular team tweeted here. This means you get to save your project as an SVG template.
Single File Components
In the previous Angular versions, you had to create multiple component templates in one file to work using templates and styling your apps. With Angular 15 features, Google has made it easy to create component files instead.
With this, you can share everyday styling faster, making other components across different apps or files more accessible.
More Stable Image Directives
The NgOptimizedImage was released in Angular 14 to make it easier to load image performance. “Images are a common and crucial component of web user experience, says Kara Erickson, software engineer at Chrome Aurora, and Leena Sohoni, a technical analyst.
However, many of these images should be lazy-loaded so that pictures marked as “priority” will load faster on web pages or apps.
Kara and Leena affirm that “the Angular (15) image directive lazy-loads non-critical images by default and only eagerly loads images specially marked as “priority”. This ensures that most images exhibit optimal loading behavior.”
This makes the apps built with Angular adopt the best practices possible easily. Also, the bugs in angular’s v14 are now fixed in v15, according to Minko Gechev.
The Angular 15 features give this image directives several upgrades, such as Fill mode (which is still experimental) and Automatic srcset Generation — which reduces the download time of an image by generating srcset and uploading an image with the size when requested.
To use this directive, you can use it directly in your apps with NgModule or standalone components. Alex Castle from the Chrome Aurora team recorded a directive for you here.
Stabilized MDC-Based Components
This component type allows developers to write components more clearly than before using TypeScript. Before Angular 15, it took a lot of work to refactor all the MDC-based material on Angular. But with Angular 15 features, you can use Material Design Components to simplify the process.
They also improved these components to give better accessibility to developers while abiding by the Material Design Specifications of Angular.
However, the build has deprecated many of the components’ old implementations in this version of Angular. So, you can go for the legacy import to recover them if necessary.
Upgrade to Angular 15 from Angular 14
Now that you know some of the major Angular 15 features, how do you upgrade from your existing version?
Since you’re using Angular 14, you don’t have to do much before updating. Just follow these steps:
- Ensure you’re using a supported version of node.js (versions 14.21.x, 16.13x, and 18.10x) before upgrading.
- Check if your TypeScript version is supported. Angular 15 supports TypeScript from version 4.8 upwards.
- You can upgrade your Angular CLI version directly using the ng update command. Run the command ng update @angular/core@15 @angular/cli@15 in the application’s directory to update.
- You can also uninstall Angular 14 CLI and re-install Angular 15’s CLI.
- Or, go on to update the library files and components of your Angular version.
Conclusion
Angular 15 features extend beyond the seven listed above. Some of the other features include Component Dev Kit Listbo — which helps developers build UI components — functional router guards, the router now unwrapping default imports, new lazy loading features, and automatic language service import.
There are many more, but there’s only one way to find out: upgrade your Angular to v15 and hire a team of Angular developers if you need external IT support for your apps.
FAQs:
Q1. What is the difference between Angular 14 and 15?
Angular 15 is an update to Angular 14; and as a result, has updates and better features, and is a more stable version of the previous framework. Angular 15 also has a newer API system than Angular 14.
Q2. What are the advanced features of Angular?
The advanced features of Angular include new API systems, a more stable standalone API, better image directives with NgOptimizedImage, higher availability of single file components, and more. The latest Angular 15 features have updates that fix most of the pain points of Angular developers.
Q3. Can I learn Angular in 15 days?
No, you'd need around 2-3 months to understand the framework properly. However, you can learn the significant features and applications in 15 days if you have background knowledge of programming (and programming languages).