|Angular 15 Adds Standalone APIs|
|Written by Kay Ewbank|
|Monday, 21 November 2022|
Angular 15 has been released with improvements including better performance and the availability of new standalone APIs which enable developers to build applications without using NgModules.
The main improvement for developers in the new release is the graduation of the standalone APIs introduced in preview in the previous release. These are now part of the stable API surface and the developers say they will be evolved gradually following semantic versioning. The standalone components work across Angular, and they now fully work in HttpClient, Angular Elements, and router. The APIs allow you to bootstrap an application using a single component, and there are APIs for Router, HttpClient tree-shakable, and Directive composition.
Another improvement is that the image directive is now stable. This was introduced in developer preview following its development in collaboration with Chrome Aurora. The benefit of an image directive comes from the fact that in nearly 80 percent of desktop pages, an image was the Largest Contentful Paint (LCP) element in 2021. However, only 18.74% of Angular sites had good LCP on mobile in June 2022, and the team at Chrome felt that unoptimized LCP images could be one of the primary causes of poorer LCP on Angular websites.
The Angular image directive was designed to help improve this situation. The directive offers intelligent lazy loading, meaning that images that are invisible to the user on page load (for example, below-the-fold images or hidden carousel images) can be lazy-loaded to free up browser resources to load other critical text, media, or scripts.
The directive also prioritizes critical images where there is a resource hint identifying an image as critical.
The v15 release also includes new features for the image directive, including automatic srcset generation so that an appropriately sized image is requested by generating the srcset attribute for you. An experimental fill mode has also been included. This causes the image to fill its parent container, removing the requirement to declare the image’s width and height.
Angular 15 is available now.
or email your comment to: email@example.com