Angular 15

Angular, the popular JavaScript framework, continues its journey of updation with the release of version 15, bringing some new improvements, and new features, as well as some breaking changes and deprecations. In this article, we'll explore the key highlights of updating your Angular applications to version 15.

What's new in Angular 15?

1. Standalone Components Are Stable

Angular v15 introduces stable standalone components that allow you to build Angular applications without using NgModules. This new API makes the development process easier and will provide more flexibility and modularity in Angular application architecture.

2. Stable NgOptimizedImage Directive

The NgOptimizedImage directive becomes stable in Angular v15, because of that it reduces image download time in Angular applications. By using this directive into components or NgModules, you can optimize image loading, enhancing overall application performance.

3. Directives for Host Elements

With the introduction of the directive composition API, Angular v15 enables the addition of directives to host elements. This functionality addresses feature requests and allows for the augmentation of component behaviors without resorting to inheritance.

4. Enhanced Stack Traces

Angular v15 collaborates with Google Chrome developers to deliver cleaner stack traces that simplifies the debugging process for Angular applications. The modified stack traces will focus more on application-specific code and will focus more into runtime issues.

5. Stable MDC-based Components

Many components in Angular Material v15 has redesigned to be based on Angular Material Design Components (MDC) for the Web. They not only enhances accessibility but also makes sure the application follows the Material Design rules more closely.

6. Improved Dependency Injection (DI)

Angular 15 streamlines DI with the provideIn property. This allows you to specify the provider scope (component, root, etc.) directly within the token which enhances the code readability.

7. Experimental ESBuild Support

ESBuild, a JavaScript bundler, is now an experimental feature. This makes it easy for potentially faster build times, especially in larger projects.

8. Automatic Language Service Imports

The Angular Language Service gets smarter. It can now automatically suggest imports for directives, pipes, and components, reducing boilerplate and development time.

Major Changes in Angular v15

While the update to Angular v15 brings significant improvements, you also need to know about certain breaking changes that might impact existing applications:

• Node.js and TypeScript Version Support: Angular v15 discontinues support for certain Node.js versions and mandates the usage of TypeScript version 4.8 or later.
• @keyframes Format Changes: Names of @keyframes rules now include the component's scope name, potentially affecting existing TypeScript or JavaScript code.
• Invalid Constructors for Dependency Injection: The compiler now reports errors when constructors inherited from base classes are incompatible for dependency injection purposes.
• Router Outlet Behavior Change: RouterOutlet now creates components after it checks for changes, which might impact tests and production code that rely on when components become available.

Deprecations in Angular v15

Angular v15 also marks certain features for deprecation, which indicates it will not be usable in future.

• DATE_PIPE_DEFAULT_TIMEZONE: This is replaced by DATE_PIPE_DEFAULT_OPTIONS, where the timezone field in DATE_PIPE_DEFAULT_OPTIONS defines the time zone.
• Injector.get() with InjectFlags parameter: This should now be used with the InjectOptions object instead.
• TestBed.inject() with InjectFlags parameter: Similarly, use TestBed.inject() with the InjectOptions object.
• providedIn: NgModule for @Injectable and InjectionToken: The usage of providedIn: NgModule or providedIn: 'any' for an @Injectable or InjectionToken is being deprecated. Instead, consider using providedIn: 'root', or if providers must be scoped to a specific NgModule, use NgModule.providers instead.
• RouterLinkWithHref directive: This directive is being replaced by the RouterLink directive, which now includes the functionality of RouterLinkWithHref.

Upgrade from Angular v14 to Angular v15

Before updating to Angular v15 you need to check

• You are using a supported version of Node.js. Angular v15 supports Node.js versions 14.20.x, 16.13.x, and 18.10.x.
• You are using a supported version of TypeScript. Angular v15 supports TypeScript version 4.8 or later.

Follow these steps to update your application

• In the project directory of your Angular application, open a terminal or command prompt.
• Run the following command to update your application to Angular v15:

  ng update @angular/core@15 @angular/cli@15

• In your application's tsconfig.json file, remove the enableIvy setting. Since Ivy is the only rendering engine in Angular v15, this setting is no longer required.
• Ensure that all ActivatedRouteSnapshot objects in your application have a title property. In v15, the title property is required for ActivatedRouteSnapshot.
• Note that relativeLinkResolution is not configurable in the Router in v15. This setting was used to opt out of an earlier bug fix that is now standard.
• Update instances of TestBed.inject() that use an InjectFlags parameter to use an InjectOptions parameter. The InjectFlags parameter is deprecated in v15.
• Using providedIn: 'any' for an @Injectable or InjectionToken is deprecated in v15.

After You Update:

Once you have updated your application to v15, review your application and its interactions to ensure everything is working correctly. Make sure to test all functionalities and components to confirm that there are no regressions or unexpected behavior.

Recent Articles on Angular

• Difference Between $evalAsync and $timeout in AngularJS
• Achieve Two-Way Data Binding in Angular with ngModel
• Purpose of ProvidedIn in Angular
• Handle User Events in Angular Components
• Implementing Lazy Loading in Angular
• Passing data from Child to Parent Component in Angular
• Difference between @Injectable and @Inject Decorators
• Content Projection in Angular
• Attribute Directives in Angular
• Built-in directives in Angular
• Use of *ngIf and *ngFor Directives in Angular
• Purpose of NgModule Decorator in Angular
• Component Communication in Angular
• Describe the MVC framework in Angular
• Built-in Structural Directives in Angular
• Purpose of the ngOnInit() method in Angular

Conclusion

As Angular continues to evolve, updating applications to the latest version ensures access to new features, enhanced performance, and improved security. However, it's important to be aware of breaking changes and deprecations to avoid any potential issues during the update process.