What’s New in Angular Language Service in 2021

Angular Language Service is looking to change the way you code. Get a look at Ivy now, in experimental mode, so you’re ready for the official release!

In this post, we will take a look at the Angular Language Service, what it is used for and why. We will then take a look at the great improvement with this newest Ivy release.

What Is the Angular Language Service?

According to the Angular docs, the Angular Language Service provides code editors with a way to get completions, errors, hints and navigation inside Angular templates. It works with external templates in separate HTML files, and also with in-line templates.

How It Works

In simpler terms, no matter the code editor you use, be it VS Code, Webstorm or Sublime text, there is an analysis engine you can add to it that will automatically integrate with your Angular project, whether that’s HTML in the template component or TypeScript. It goes straight to your config files and finds out about all the templates you have in your project and provides adequate support as you open a template. This integration then shows up while you code as next-code suggestions, navigation, reference tracking and error flagging.

Why It Is Important

The Angular team has made it super clear they are focused on ensuring developers get the best experience and so it makes sense that how you work on your Angular projects, no matter your code editor, is covered. With the language service, you get to become faster, as suggestions pop up while you write and you get more efficient and less prone to common errors.

How to Install Angular Language Service

Now that I’ve got your interest, this is how to install the Angular Language Service in any of these three IDEs.

A. Sublime Text

In Sublime Text, you install the service in these simple ways:

• Install the latest version of TypeScript in a local node_modules directory:

content_copynpm install --save-dev typescript

• Install the Angular Language Service package in the same location:

content_copynpm install --save-dev @angular/language-service

• Once the package is installed, add the following to the “compilerOptions” section of your project’s tsconfig.json.

Inside the tsconfig.json, add the code block below:

content_copy"plugins": [
  {"name": "@angular/language-service"}
]

• In your editor’s user preferences (Cmd+, or Ctrl+,), add the following:

Sublime Text User Preferences

content_copy"typescript-tsdk": "/node_modules/typescript/lib"

This allows the Angular Language Service to provide diagnostics and completions in .ts files.

B. Webstorm

For WebStorm all you have to do is to enable the Angular plugin with this link here. Since the 2019.1 version of WebStorm, the @angular/language-service is not required anymore and should be removed from your package.json.

C. Visual Studio Code

Make sure you have the latest VS Code version update, then download the latest version from the ng language service releases page (the assets section). Open up your VS Code and click on the extensions tab, click on the three dots and choose Install from VSIX.

It will open your file manager and you’ll go ahead to choose the file location where you downloaded the release file.

After installation, your VS Code will prompt you to reload the app as download and installation have been completed.

If you open any Angular project now, you can see the language service in action. I hovered over a bound property and the definition appeared like this.

You can, however, get the last released version right inside VS Code. If you search the extensions tab, you will see Angular Language Service with over 2 million downloads. You can also install it manually in the CLI by using this command:

npm install --save-dev @angular/language-service

Ivy Renderer and How to Start Using It

The reason I asked you to download the latest version straight from the releases page is that there is a new update. This new update is super important because it’s now in sync with the whole Angular ecosystem. Before we continue, find the extension settings in your VS Code and enable experimental Ivy.

Angular in the past used a view engine to do the compilation of code from TypeScript to the DOM. With Angular 11, the Ivy renderer became the default Angular renderer and everything is now faster and way more efficient than ever. It makes sense for Angular to make this update because the view engine will eventually be deprecated.

This new version of the language service now uses Ivy and so it ships with:

• better type-checking
• smarter caching mechanisms
• faster definition updates
• faster error checking
• better code generation and smarter component detector.
• more efficient codebase diagnosis

There were a couple of errors that the view engine threw that are no longer the case now. You can even notice the speed change with autocompletion and definition as you hover—that is Ivy! 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.

Conclusion

We have looked at the Angular Language Service and what it means and why it is so important in our workflows as Angular developers. I am up for anything that makes my life easier, and Angular is consistent with ensuring that is done for me. What other new things do you notice about the language service? If you want to go in-depth about implementation, here is a link to the Angular Language Service API.