New Features of Angular’s Ivy Language Service

Take a look at what Angular has officially released with Ivy Language Service, from type checking and error detection to platform consistency and codebase diagnosis.

You might have read our introduction to Angular Language Service post, where we gave you a look at experimental Ivy and what it’s promising. Now Angular has officially released Ivy Language Service, and we are going to take a closer look at the incredible features it offers.

What Is Ivy Language Service?

Whenever you use an integrated development environment (IDE) like VS Code or Sublime Text, you’ll notice that it tries to help you write code better and faster by providing things like basic autocomplete functions, checking errors and even providing information on elements when hovering.

This additional help you get is actually powered by the language service of the particular language you are writing. For Angular, this is now the Ivy Language Service

How It Works

As you type in code, the IDE talks to the language service through language protocol service. So for every new edit, the IDE just asks the service, “Is this correct?”

The service can answer in a lot of ways, such as, “Yes, this is correct,” “Oh, I think she is trying to declare a function. Please show her a few options so she can easily do so without typing out everything,” or even “Oh, that is not correct. Please draw her attention to the errors she is making,” and then proceeds to draw the red squiggly lines.

You can see how this helps to produce a great experience for you the developer writing code.

Let’s See It in Action

Let’s scaffold a simple Angular application to showcase the new features of the language service. You can get this set up for yourself to fully follow along, or check out the gifs as we go.

Open up your VS Code and run the command below:

ng new strictapp --strict

Now the strict flag will automatically make strict checks true in your compile options in your project. Inside your app component file it should look like this:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'strictapp';
}

Now replace the boilerplate code in your app.component.html file with this code block below:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2>Angular blog</h2>
  </li>
</ul>
<h1>{{title}}</h1>

This is the boilerplate for old Angular apps, which we will use to demonstrate the language service.

Now let’s take a closer look at some of the newest features of the language service.

Consistency Across Platforms

Before this newest version, a language service already existed. However, as Angular progressed into version 11, there was an inconsistency with the platforms which started to lead to little bugs and lags. This was because the language was in V11 powered by Ivy, but the underlying structure of the language service was still being powered by the old view engine. This is now changed and all messaging between your app, the build process and your IDE are now consistent.

Better Type Checking with Faster Definition Updates

The type checking in this new version is better at checking types, and the definition updates are even faster. The definitions are more detailed now, and everything defined can be identified and expanded upon. Just hovering around shows this really well.

Smarter Caching Mechanism

Although the renderer has been changed, major changes were also made to the language compiler itself, which in turn affects the way caching is done—making it better and more efficient. The communication from IDE to service protocol is now also faster.

Other amazing things like generic pipes support, structural directives and directives with compound selectors also shipped with this to ensure you can access specific elements in the whole project from one place.

Better and Faster Error Checking (with Possible Suggestions)

This new update also gave us something really, really helpful: Now errors are caught fast, and the red squiggly line is drawn as you err.

It gets even better! We also now get suggestions. Like, “Are you trying to say Angular and you typed Angela?”—which is really helpful.

This immediate response will help us catch errors on the fly, reducing the bugs we have to solve later in the process.

Efficient Codebase Diagnosis and Smarter Component Detector

This is also a great feature. With the new version, your IDE can now figure out a lot of things, like elements from ecosystems such as Angular Material and CDK or diagnosing your codebase. When you use advanced IDE query features like “find all references,” you see that the IDE can now change things in a component and its corresponding template at once. That is really brilliant.

So Angular compiler, in an attempt to compile TypeScript faster while accommodating all the type checks and rules, devised a method where it generates TypeScript code for each template, and then TypeScript can check for errors inside that code block. This generated code block is known as TCB, type-check block. This new version of the language service is taking advantage of TCB to parse through templates.

Conclusion

There you have it! The amazing features of the now-official Ivy Language Service for Angular. If you already use the language service, now you get a better version. And if you are new to it, you get to experience so much ease like never before.

Right now this experimental update is opt-in, as you noticed with our demo but in the future it will become default just like the Ivy renderer is now default for Angular. If you have any issues using it, submit here on GitHub and mention the Ivy Language Service. If you want to go in-depth about implementation, here is a link to the Angular Language Service API. Happy hacking!