The Power of Angular 9

I have written an article earlier on Angular 8 which had some traction generated and hence wanted to update the community on the knowledge I have collected about Angular 9 which is recently launched. This is the consolidation of the videos of Edureka's what is in Angular 9 and Aceadmind's what is new in Angualr9.

Ivy the Magician

As expected following Angular 8 where Ivy was introduced in beta now this takes the driver seat. Ivy is the new angular rendering engine that is under the hood change. This means for the developer the API, syntax, and way we create an angular app has no changes. However, it changes the way on how it improves run time performance, reduces the bundle size of angular app so downloads are faster. It also uses function calls and reduces build time.

A normal hello world app using Ivy can move the bundle size from 36KB earlier to 7.37 KB in Ivy Minified version and to 2.7KB in Ivy compressed version

AOT - The front-drive

AOT aids in compiling the code before the browser downloads the code. AOT complies the code's HTML & TypeScript and hence makes rendering faster. It also aids in making angular framework smaller, aids in finding template errors during compile-time and reduces injection attacks and hence makes your app more secure. It does away with the need for the browser to do additional downloads compared to earlier JIT compiler.

Flexible Type Checks

The angular app provides the configuration of how to we want to perform the type checks in our template. We have 3 modes basic, full, strict. This can be configured in tsconfig.json using angularCompilerOption. As of earlier version, it will only check bound values against the declaration. For eg assume we have a component that has only name member variable defined as a string and we are supplying integer value to the component, it will not throw any error. It will convert the integer as string and display. With the option of type check, it can check if assigned value and the defined variables/members of components are of same type and throw compilation error. You will not wrongly bind wrong data types and have run time errors. It will be a compiler error. 

Other Minor Changes

• TypeScript needs to be updated to 3.7. No support < 3.6
• TSLib is peer dependency rather than a direct one.
• @ViewChild in your component to select elements from templates to use in your component and select static to false. But this option introduced in Angular 8 is moved out with default as false. You need to only mention if static is true and you need that kind of access.

What to expect in Angular 10

1. Continue work on Ivy 
2. Bug Fixes and other improvements
3. New APIs because of Ivy.
4. (Even) Smaller Bundles.