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

Angular had some raught 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 of 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 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 backported 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”

Parentheses with the ngModel form a banana, and square brackets symbolize a box where the banana is stored ☺

Unfortunately sometimes people write the same code in a different order. They put parenthesis outside and the box inside, like: ([]) causing Angular to go nuts.

The fix will report such issue and offer a fix through language services, that is by the IDE eg. Visual Studio Code.

If you are interested in writing similar dev friendly features check out the git commit. It is quite interesting to read. Among the fact that banana in the box now became an official term used in the Angular source code.

By the way, if you like to write your own rules to check code for typos check also out Hinty. It is a Visual Studio Code extension just for that. It works for all technologies, you just write a regex rule and message you’d like to see.

The fix for banana in the box was introduced by @ivanwonder.

Easier lazy loading

With a great commit by @alxhub lazy load became now easier. It should satisfy people who like ongoing effort of Angular to write less boilerplate. Usually when you load component or children in a route, you have to select what to load. Fortunately with earlier introduction of default export it is clear what component should be loaded. The change takes default exports into account and just loads what is necessary :

Dynamic router outlet names

@atscott found a way to make dynamic component development easier. His commit to the Angular 15 branch makes name parameter an input rather than attribute.

The practical result is that now, you can bind it to a variable, for example from a for loop. Before it was not possible, making it difficult to write robust, elastic components. This example from test cases show this game changer:

Component scoped keyframes

For a long time there was a problem with CSS keyframes. They didn’t seem to be component scoped. It made my hair white multiple times in my life when they leaked or were overlapped by other key frames with the same name.

It was not unknown to the Angular team. The debate about how to tackle the issue dates since 2019.

With version 15 of Angular a definitive solution was made. I believe the decision is good. The key frame name will be prepended with the host (component) selector.

Now, keyframes will follow component scoping we love in Angular. Word of notice has to be made here. The change can break your code when you rely on a global aspect of keyframes defined in a component. If you do, you have to move them to global stylesheet.

That’s it if it comes to the most important changes so far in Angular 15 line. Other changes included are:

• canParse replaced by analyze
• mandatory hint parameter in parse
• improved image warnings
• using DOCUMENT token to query preconnect links
• renamed rawSrc -> ngSrc in NgOptimizedImage directive
• making sure that the useAnimation function delay is applied
• support of hasInvalidatedResolutions
• And more

As you can see there is a lot of changes in Angular 15, and we are far from seeing all of them since it is only the next.5 version that was released on 5/10/2022.

BTW. If you like to sharpen your Typescript, HTML and other skills check out Summon The JSON Flashcards.

If you’d like to see more insider articles about changes in Angular please clap, share and upvote the article. Cheers!

Source