Using the Angular Template Language Service

Angular Language Service was released to make the developers more productive and reduce the errors by offering better code completion and context. This service is available for installation for the Visual Studio as well as other code editors that support TypeScript. This effectively allows us to use the intellisense for variables defined and used in the template. The navigation service is provided to link properties and their definition. Errors can be detected at the time of code creation by including squiggles. Hints are also provided for code completion.

download.png

Installation

Installing in visual studio

The Angular language service can be found at the Visual studio extension marketplace. By clicking on the install button, the Angular project will be auto-detected the required configurations will be provided accordingly.

Or

Type the following piece of code in the navigation bar.

+P ext install ng –template

Testing using simple ‘Hello World’ program

Consider the following piece of code:

Import { Component } from ‘@angular/core’;

Export interface Data{

name: string;

address: string;

}

@Component({

selector: ‘my-app’;

template: ‘<h1>Hello {{data.name}} </h1>’;

})

export class AppComponent{

data: Data;

}

After the installation of the Angular Language service, it might be observable in the above code that certain information is revealed by hovering over the text. Hovering over ‘data’ can reveal that it is a property of the ‘AppComponent’.

download (1).png

By pressing F12, the cursor is navigated to ‘data’ inside AppComponent. By hovering over ‘name’, it reveals the ‘name property of data’ which is defined inside ‘external interface Data’. The definition of ‘name’ can be navigated using the F12 which is present above it. The navigation can also be done if the definition is present in a separate file. The property name or element name present in one file and the definition present in another can be navigated to using the navigator service.

Working of Language Service

Language Service Topology:

The starting point of a language service topology is an Editor process. A separate process is started by the editor which then communicates with the Angular Language Service process through an RPC. The information written in the editor is continuously communicated to the other process to maintain current state. All kinds of modifications and queries like completion list, diagnostic messages etc are also passed along through the RPC.

The current architecture of VS code presents a problem as a separate process for the TypeScript Language Service exists which performs the same function. An extra overhead is created due to multiple processes running.

This overhead is expected to be reduced in future architecture plans by maintaining TypeScript Service 2.3 on one process with Angular Language Service as a plugin.

Completion Workflow:

The language service provides a completion list to complete the code by providing suggested elements. This is done by analyzing a code in a hierarchal fashion using HTML AST by moving through the parent node to the child node. The position of the cursor determines the ending point of the analysis and the child of this node is chosen as the best possibility that can be present inside the parent node. For example: for a div tag present inside 2 parent elements, the completion list checks to see which elements can be the child of it.

But for an interpolation, the HTML AST doesn’t provide any simplification for the completion list. Thus an expression parser is needed to interpret the next element in the completion list. The interpolation expression is broken down in a hierarchal manner. For the element with missing values, a <missing> is inserted to produce the AST. Once inside the interpolation, it keeps check of where to go next. But with a <missing> to check where to go next, TypeScript language service is used inside the Angular language service. Series of messages and responses are generated to and from this service. It asks for the required property from TypeScript language service which returns the symbol for missing value property and then it inquires about the members of the property which is returned by TypeScript Language Service and the list is generated.

Personal Editor Integration

For a personal editor integration such as Vim, the Language Service can be added using an extension. But the Language Service extension may be absent, and so a separate piece of code needs to be added to add the functionality. The Language Service Host interface will have to be implemented by using the following piece of code:

export interface LanguageServiceHost {

readonly resolver : CompileMetaDataResolver;

getTemplateAt(fileName: string, position: number): TemplateSource;

getTemplates(fileName: string): TemplateSources;

getDeclarations(fileName: string): Declarations;

getAnalyzedModules(): NgAnalyzedModules;

getTemplateReferences(): string[];

}

Language service consists of two parts i.e. the actual Language Service and the Language Service Host.

download (7).png

The host employs TypeScript to answer the questions to the queries asked of the service. For creating one’s own roll-up Editor Integration the following code is required:

export classTypeScriptServiceHost implements

LanguageServiceHost {

…

}

const ngHost = new TypeScriptServiceHost(host,service);

const ngService = createLanguageService(ngHost);

…

const diagnostics = ngService.getDiagnostics(…);

This creates a TypeScript Host and then an Angular Language Service can be needed and the host is for the TypeScript is passed to it along with the service and a Language Service Host is returned. Queries can be made to these Language Services to get file diagnostics, for navigation and to get the completion list.

This provides the integration for TypeScript with Angular Language Service residing in it. The Angular Language Service can also be wrapped to create the appearance of a TypeScript Language Service similar to the plugin architecture. But with roll-up editor integration, the Angular Language Service provides a specific set of functionalities not provided by TypeScript. These functionalities include completions list and diagnostics despite the presence of HTML files.

download (8).png

In order to provide these services in just the template, the getTemplateReference code can be present inside the Language Service Host. In the host, a query can be made to the Host for all the HTML files that are Templates to distinguish with other files.

Future of Language Service

The Language Services have come forward as a gift for programmers, but these Services are not complete yet. The Language Services is still in the beta version and thus there are some bugs and issues that require attention and maintenance. In addition to that, there are some features that can be added to improve the productiveness of these services for developers. Some of these features include:

The Unification of these Language Services with TypeScript server i.e. with version 2.3 as soon as it is available. Thus the need of the hour is to move towards a unified architecture.

  1. Find all References to be provided in the Template which is currently unavailable in the split version.
  2. Reading Refactor/ Rename which requires a unified version.
  3. Quick fixes are to be provided and taken advantage.
  4. Improve the diagnostics capability
  5. Add support for other editors.