Angular 9 Has Arrived: Know What’s New And Changed

Angular 9 has finally released.
But what does this mean for you and your project?
Let’s have a look at the most important changes and what they mean for you and the Angular landscape.

What’s New?

Ivy – Major Feature in Angular 9
In case you don’t know what Ivy is, it’s their new internal view rendering engine that brings the Angular app to life. It uses your components or templates and turns all of these into instructions that run in the browser when you ship your finished application. These are the instructions that change the DOM and thereafter update the DOM render stuff to the page end on. Therefore the fact that we have a new rendering engine means it’s a under the hood change. The API, the syntax you work  with and the way you create Angular applications, components, modules and so on hasn’t changed at all. It’s still the same as before, so, everything you learned about Angular still is valid and relevant.

Now, what is the cool thing about rendering engine? It already offers smaller bundles for most Angular apps, not necessarily for all but the team is working on making every Angular app smaller – specially the larger apps. Over the next months, the Angular team will continue to work on Ivy and ensure that the users get smaller and smaller bundles. Smaller bundles are always great because the users have to download less code until the app starts up. In addition, Ivy is also written in a way that offers an amazing runtime performance. So the idea basically is that with this new engine apps not just startup faster but perform fast as well.

Another thing that changed with Angular 9 is that when you build your app for development and you run “ng serve” in your application, it will by default run ahead of time compilation as compared to older Angular versions where it used just in time compilation.

Technically it will give you the same app but because of the way it compiles your code, there might be some differences or bugs in the content it spits out. But one new feature is that you can configure how the types you’re using in your templates should be checked. Some basic support was available in the past too, however, now, it’s a bit more detailed. You can switch between three different modes :-

• Basic mode
• Full mode
• Strict mode

This simply determines how Angular will parse your component templates and which things it will check and for which things it will throw errors. You can learn more about these modes in Angular’s official page ( https://angular.io/guide/template-typecheck ). As the name suggests, the strict mode is probably the strictest mode of all of them which does most checks.

First of all let’s check the strict mode is not turned on right now in the “tsconfig.json” file.

You can turn on the full template check with “fullTemplateTypeCheck”  set to true inside of the Angular compiler options. This will help you check your templates for a lot of different things and catch a lot of errors.

.

Here, in the app.component.html , we are passing “name” property to the user component and the value we are passing is “user.age”. When you compile this, you won’t find any error because in the app.component.ts we have user object with the age property. Nonetheless this actually yields an error, why? Because inside the “user component” we have set the datatype of the name property to which we are binding its string type.

If we take a closer look into the user object inside the app.component.ts age, we are passing a number.

Now with Angular 9 we can go back to “tsconfig.json” file and add a new option strictTemplates and set it to “true”.

It will now take this into account and after restarting “ng serve” it will take effect. This will compile the application and give us an error.

Now, it catches this unnecessary error where we are passing the wrong type of data into this component. Once we switch this to “user.name” which is already a string type, this error will go away.

So, there is an extra addition by Angular 9. This enhanced checking mode helps you avoid unnecessary mistakes that might crash your application.

Further, one of the major changes that Angular 9 has brought is related to “@ViewChild” – when you’re using “@ViewChild” in your components to select some elements from your template.

To work with this in your component, you have to add this extra static option. In Angular 8 you already have to add this second argument to add view child and set static to false in most scenarios. However, in Angular 9 whenever static is set to false, you can just get rid of this argument.

Now, we can simply use “@ViewChild”. There is just one exception if you want to use this element before running change detection ran which is typically the case in ngOnInit() for example, you have to add static true so, static false basically never needs to be added it’s the default but static true needs to be added if you access the element you’re getting access to inside of ngOnInit(). So, before running change detection, add “ static : true”. Though Angular 8 also had the same feature, the difference is that in Angular 8 you had to add this “static : false” whereas in Angular 9 “static: false” can be omitted.

It doesn’t really sound like a lot of change, does it? Well Ivy is a big change even though it’s just under the hood therefore we don’t see it, but getting smaller bundles in our application is a huge win. Since we don’t need to change our code and when you think about Angular 10 or the future of the Angular in general, Ivy will most likely play a major role. Of course the Angular team is constantly working on Ivy, we will experience more and more size improvements  and runtime performance improvements. Further, besides bug fixes and other improvements, we might also see API’s and new syntax to build apps all because of Ivy. This does not mean starting from the scratch or relearning everything or writing Angular apps in a totally different way, but if something gets easier over time, no one would complain.

Further, Angular 9 has also brought some minor breaking changes and deprecations. Well, the best way to learn them is through the official Angular 9 update guide which you find on https://www.angular.io.

I hope the article helps you.

For any queries, feel free to get in touch.