U2U Blog

for developers and other creative minds

Angular Language Service

One of the best extensions you can find for your Angular programming needs is called the "Angular Language Service", especially if you're using VS Code.

What is the Angular Language Service?

The Angular Language Service is a plugin built for the TypeScript [TS] language. It allows to evaluate the templates (inline and html files) at development time, from your IDE. In other words you will get "true" autocompletion when trying to use properties from an interpolation directive or red squiggly lines if you made a mistake in your template.

How does it work (without going into too much detail)?

On 27 April 2017, the TS team made an announcement for version 2.3 of the language. The team states that together with the Angular team they were able to create a public Language Server Plugin API. This allows people to augment their editing experience by creating plugins that make use of the Language Server.

The internal name for the Language Server is called "tsserver" which stands for "TypeScript standalone server". It is a node executable that includes the TypeScript compiler and language services. "tsserver" exposes an API through a JSON protocol.

In other words, the Angular Language Service will talk to this tsserver executable in JSON to get tsserver to compile and evaluate the templates so that we can make use of TypeScript in those same templates! Which is a great step forward for us as an Angular Developer - or teacher!

How do I make use of it in VS Code?

Open your extensions menu and look for "Angular Language Service". The author is Angular, it is pretty hard to miss ;-).

What about other editors?

Some editors don't make use of the tsserver when evaluating TS code, so it might be that your editor already supports template evaluation! I've found a blog post from Brian Love explaining how to install it for WebStorm and Sublime right here

Enjoy coding!

PS: This is a full copy of my blog post at: https://diedrikdm.github.io/2017/05/01/angular-language-service.html