Ivy: New Angular Compiler

Angular Ivy is the code used for Angular’s next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and their runtime instructions are used by default instead of the older compiler and runtime, known as View Engine. Firstly, we take a look:

How does the compiler work?

Architecture:

• Regular typescript compilation works as:
  
• Angular compilation works as:
  

Compilation Model:

• When the compiler runs, then it converts typescript code into javascript code just like lib.ts into the lib.js file.
• And, this JS file has no type information. It’s ready to execute in a browser.

Feature of compilation:

• NgModule Scopes:
  
• Partial Evaluation:
  The compiler will evaluate
  • Literals (Objects and Arrays),
  • Constant/Variables,
  • Binary/ternary/logic Expressions
  • String Templates
  • Function calls
  • Property chains
  • Imports/Exports
• Template Type Checking:
  The significant challenge is that the Typescript compiler doesn’t support checking the HTML code. That’s why the approach is:
  • Transform angular expression code into TS code.
  • Set up a typescript program and feed it with this ‘type check blocks’.
  • Gather any error and map them back to the original template

Type checking:

• <account-view> should be a selector component with an ‘account’ @input.
• getAccount() should take two arguments and should return and Observables/Promises.
• ‘user’  should be an object with an ‘id’ property.
• [account] should accept null values.

Advantages

• Smaller bundle sizes
• Faster testing
• Better debugging
• Improved CSS class and style binding
• Improved type checking
• Improved build errors
• Improved build times, enabling AOT(true) on by default
• Improved Internationalization

How does it work?

It is “tree-shaking friendly,” which means that it automatically removes unused code (including unused Angular features!), shrinking your bundles. Another feature is that it compiles each file separately, reducing rebuild times. In short — you get minified builds, faster rebuild times and simpler generated code.

Running Ivy

• Created the new angular Project
  
• Enabling Ivy by adding the following lines
  
• Run the compiler by executing ngc command
• Let’s look at the template of the AppComponent
  
• Code generated for this template inside the dist/out-tsc/src/app/app.component.js
  

Understanding the Generated Code

If we look on the top of the generated file we get the following statement:

• iɵ is actually just the core Angular module, and these are the all functions exported by Angular
• The letter ɵ indicates that some method is private to the framework and must not be called directly by the user.
• Similarly, ɵT stands for text, and ɵe for elementEnd

References

• https://angular.io/guide/ivy
• https://medium.com/angular-in-depth/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf

🔊 Listen