Angular 15 is (A)live

This November, Angular 15 arrived, with a lot of changes that are very important for Angular developers. In the past year, instead of the old View Engine renderer, we now have Ivy, which is enabled by default. This led to the development of a series of improvements for Angular developers. So in Angular 15 there are dozens of new improvements that will lead to better performance and more efficient work of Angular developers. 

Angular standalone components 

Angular Modules didn't really appear until the issue of publishing Angular libraries to npm. So now every component or directive must be part of a module. That solution has been applied as such for a long time. All of this wouldn't be a problem if there wasn't a large amount of repetitive generated code (generated boilerplate). 

Angular Standalone Components, or components without modules, were introduced at the end of 2021 in the version Angular 14 and the community really liked them as such, and now we are lucky to have their first stable version with Angular 15. 

In short, standalone components will work properly if the metadata is set correctly and Angular will treat the components as modules. 

The Angular team has not only worked on creating an API for independent creation of components, but the goal is to prepare a fully functional API without modules. In version 14, a functional API for bootstrapping applications was added, and now a functional router and a functional http module have been added. 

In addition to more readable code and freedom from NG Modules, the functional approach would mean that all APIs are now fully free of unused (dead) code (fully tree-shakeable). The Angular team says this should reduce the router API stack by 11%, which is a great thing. 

I would just like to mention here that by introducing independent components, the goal is not to throw out Angular modules completely. They are quite rooted in the Angular architecture and their use in many cases will be necessary in order to achieve the results we want. Modules certainly remain a key aspect of the encapsulation of many external libraries. Standalone components can also be added to modules, just as we add regular components. 

Functional protection of the router

In a rather simplistic way, routing in Angular is based on a series of objects that define a path, a component to render, and a list of guards. The latter contains the logic that conditions access to the path and allows you to perform the appropriate redirection. 

Another new feature in Angular 15 is the ability to replace the complicated Guards class with a simple function that returns a boolean. By using Inject (added in Angular 14), it is possible to completely get rid of the Guards class from the code. 

The absolute advantage of the new architecture is the simplicity of parameterization. Instead of passing and reading data from ActivatedRouteSnapshot, we can simply pass parameters to the function. 

Directive Composition API 

Compared to React and Vue, which are based on functions, Angular is different and mostly everything is based on classes. And for some of those reasons, since we can't use simple function composition, Angular introduces Directives that are actually mixins for the component. What has been a problem so far is that you cannot directly assign directives to a component definition. Angular 15 solves this problem by adding a hostDirective property to the @Component decorator. It is interesting that the newly added property also allows for the compilation of the directives themselves. And thanks to this, it is easier to create a custom ngIf or ngFor directive. 

Improved stack trace 

Based on the results of the annual survey conducted by the Angular team, it is clearly shown that the biggest problems for developers when debugging and trying to fix a bug are complicated error messages. To solve this problem, in collaboration with the Chrome DevTools team, an annotation mechanism was created to remove lines from the stack trace that point to node modules and webpack. This is actually an improvement brought by the new version of zone.js and should make it easier to understand where the error actually occurred in the application, as we can see in the example below. 

Image optimization directive 

Project Aurora is an initiative started by the Google Chrome team. Its main goal is to work with developers of popular libraries and frameworks to create the best possible experience for web users. Less than a few weeks ago there was talk about next/image, an image rendering component to optimize Core Web Vitals metrics. A similar directive entered Angular 15, which is also the result of collaboration with Project Aurora. 

 The NgOptimizedImage directive can be used either directly in the component or in the NGModule 

More about this topic at the link https://angular.io/guide/image-directive 

You can learn more about the migration to Angular 15 here https://github.com/angular/components/blob/main/guides/v15-mdc-migration.md#how-to-migrate 

Source 

https://github.com/angular/angular/blob/main/CHANGELOG.md https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8