Summary

Angular 15 is released recently. The changes in new version include –

• Stabilizing the API which were included as developer preview in Angular V14
• Reduce boiler plate code
• Improvement in Angular CLI

Above changes result in better developer experience and performance. The document mentions the Angular framework feature changes release as part of Angular Version 15.

New Features

Stable Standalone API

Standalone APIs which were introduced in Angular V14 and were in developer preview are stable with release on Angular V15. Standalone APIs enables developer to write angular application without ngmodule resulting –

• Boot strap an application using single component.
• Less boiler plate code to be written by developer.
• Relatively easier learning curve.

Directive composition API

Directives enables reuse of UI behavior. Directive composition API enables to apply directive to host element from component itself. Prior to Angular v15, to use the behavior provided by a directive, the directive needed to be explicitly applied on the component where behavior is to be attached.

Directive composition APIs simplifies the UI composition using angular directives.

Router – Tree-shakable standalone API

Routing functionalities are achieved by using RouterModule. Angular 15 provides stable provideRouter API.  Using provideRouter function, multi-route application could be built. BootstrapApplication takes provideRouter as one of the optional options parameters. ProvideRouter is also tree shakable i.e., unused features are removed at build time.

Tree-shaking impacts the bundle size. Reduced bundle size positively impacts the application size, as relatively smaller file will have to be downloaded in the browser.

Stable NgOptimizedImage Directive

Angular V14 introduced NgOptimizedImage directive under developer preview.  The directive is made stable with release of Angular V15.

The release has also introduced new features for image directive –

Automatic srcset generation – The directive auto generates srcset based on value of the size attribute. Srcset ensures image of correct size is requested, reducing the image download time.

The NgOptimizedImage directive supports customization of –

• Breakpoints to generate srcset
• Disable auto generation of srcset
• Provide custom values for srcset to be generated.

Fill Mode – Use the fill mode when height and width of the image is not known. Fill mode causes the image to fill it parent container.

Functional route guards

Using CanActivateFn signature, inline function could be provided for canActivate function. This reduces the boiler plate code. Using functional route guard developer can create factory like functions, the function accepts parameters and return guard based on input parameter.

Router auto unwraps default exports

Modules can be exported in two ways in typescript

• Using export – These are named export i.e. objects being exported has a name
• Using export default – When using export default syntax, objects being exported need not to have a name.

During lazy loading, If Angular router finds a default export, it uses it automatically. Thus, reducing the boiler plate code.

Angular Material 15– Stable MDC based components

Angular material components have been refactored to be based on Material Design Components for web (MDC). While old implementation of new components are deprecated, they can still be accessed from “Legacy” import.

Angular material provides schematic to migrate from existing implementation to new implementation.

CLI Changes

• The CLI has included support for standalone stable APIs. The standalone component can be generated using ng generate component –standalone componentName cli command
• The ng new CLI command don’t generate following files
  • Environment files – ng new does not output environment.ts and environment.prod.ts file files. Angular.json does not includes filereplacement configuration as well.In case if you want to use environment files, Files can be created manually. Corresponding file replacement configuration needs to be added in angular.json.

• • ts – Pollyfills.ts is removed. The polyfills option in angular.json accepts array of file names to be imported.

Upgrade to Angular 15

Refer to the Angular upgrade guide URL – https://update.angular.io/. It provides a step-by-step guide to migrate existing angular application from lower version to latest version.

Reference URLs –

• https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8
• https://angular.io/guide/directive-composition-api
• https://angular.io/guide/image-directive
• https://angular.io/api/router/CanActivate
• https://angular.io/guide/update-to-latest-version