- Angular 15 is the latest version of the Angular framework at the time of writing this post.
- Released on November 16, 2022.
- The focus is on stability this year.
- node.js versions supported: 14.20.x, 16.13.x, and 18.10.x
- TypeScript version supported: 4.8 or later
- Comes with several new features and improvements that make it easier for developers to build high-performance, scalable web applications, and to take advantage of the latest technologies and platforms.
Let’s see what’s new in Angular 15.
| Features | Details |
|---|---|
| Stable standalone APIs | – Introduced in Angular 14 and now stable in Angular 15. – Allows building apps without using Ng Modules. – Allows bootstrapping an application in a single component. – Completely functional with the router, Angular Elements, HttpClient, etc. – Simplify development and serve as an alternative to NgModules. – Angular CLI has been updated to support standalone components. ng g component –standalone |
| Directive Composition API | – Gives ability to add directives to host elements for code reusability. – Only works with standalone directives. |
| Multi-Route Application | – Easily build multi-route applications using standalone APIs. – Removes unnecessary features from the router at the build time hence reducing the bundle size. |
| Functional Router Guards | – It uses the tree-shakable standalone router APIs and helps smaller Angular’s bundle. |
| Router unwraps default imports | – Automatically unwraps default exports using the feature of lazy loading. |
| Image Directive (NgOptimized Image) | – Automatically generate the SRC set. – Reduces the download time of images by image upload with appropriate size. – ‘fill’ mode as new feature (experimental) which eliminates declaration of image’s width and height as image fill its parent container. – Standalone NgOptimizedImage can be used directly in a component. |
| Better Stack Traces | – Error messages focused on code instead of errors from third-party dependencies. – Trace more of a development code than showing libraries it calls. |
| Stable MDC-Based Components | – MDC (Material Design Components) now makes it easier to refactor the component-based Angular material. |
| Automatic Language Service Import | – Components used in templates but not added to standalone components or NgModules can be automatically imported by the language service. |
| Extended esbuild Support | – Quicker build time and pipeline simplification. – Support of ng build-watch. |
| CDK Listbox | – For focus management, keyboard interaction, and bidi layout support. – Based on WAI-ARIA listbox pattern. |
| Other improvements | – Angular CLI lets you generate a new standalone component. – Reduce confguration by removing test.ts, polyfills.ts, and environments. – Default formatting configuration for DatePipe can be changed globally. |
Visit Techtalkbook to find more related topics.