What’s new in Angular 15 (so far) ?

When you call your framework Angular.js, and then rename it to Angular, you can be sure, that some people will be confused.

Angular had some hard path lately with the news that Angular.js is deprecated and dead. People understandably believed it, but Angular is actually far from being dead.

The fourteenth version of the most framework-ish framework scores some major improvements. But today we will focus on the version fifteen that’s just around the corner. It is planned to be released just in a month, on 8th November 2022.

Ivy landmark: makes Angular ultra-fast

If you are not familiar with the Angular saga, while it is the best framework to focus on user experience, for years it suffered from bad build performance compared to lightweight libraries like React. An astonishing effort to get back on tracks revolved around almost completely rebuilding the rendering engine. The new one, called Ivy was a project for years. Along the way Angular had to had been stripped from Hot Module Reload.

Fortunately Ivy made it through and the latest versions of Angular offer comfortable builds and rebuilds. Hot Module Reload is also easier to enable. Since that said, Angular 15 will mark a point of no return. Ivy will become one and only rendering engine giving exceptional experience to the developers.

Additional performance improvements

Aside of Ivy and HMR we already know and love, in the process of creating version 15 developers introduced additional performance improvement.

So far each external template was parsed multiple times for each reported type checking diagnostic accounting to exaggerated memory usage. Fix 47471 introduces a cache for templates that improves the speed and memory usage of type checking. It was also back ported to the version 14.2.

The issue was reported by @devjoost who also introduced the code that handles caching.

Mistyped banana in box fix

Another feature that caught my attention is about the banana in box. Banana in box is a term to describe the syntax of two-way binding in Angular template. You have surely seen it multiple times, but didn’t know the name. It looks like this:

[(ngModel)]=”model”