or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdlanguage-service-api.mdtesting-framework.mdtypescript-plugin.md
tile.json

tessl/npm-angular--language-service

Angular Language Service provides TypeScript-based intelligent IDE features for Angular templates including autocompletion, diagnostics, and navigation.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/language-service@20.2.x

To install, run

npx @tessl/cli install tessl/npm-angular--language-service@20.2.0

index.mddocs/

Angular Language Service

Angular Language Service is a TypeScript-based development tool that provides intelligent IDE features for Angular templates including autocompletion, error diagnostics, quick info, and navigation. It integrates with TypeScript Language Server as a plugin to deliver rich IDE support for Angular projects.

Package Information

  • Package Name: @angular/language-service
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/language-service

Core Imports

TypeScript Plugin Factory (Main Export)

import factory from "@angular/language-service";

API Entry Point

import { NgLanguageService, PluginConfig, isNgLanguageService } from "@angular/language-service/api";

Testing Utilities

import { 
  LanguageServiceTestEnv, 
  Project, 
  OpenBuffer 
} from "@angular/language-service/testing";

Basic Usage

TypeScript Plugin Configuration

Add to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@angular/language-service",
        "angularOnly": true,
        "forceStrictTemplates": true
      }
    ]
  }
}

Direct API Usage

import { NgLanguageService, isNgLanguageService } from "@angular/language-service/api";

// Check if language service is Angular-enhanced
if (isNgLanguageService(languageService)) {
  // Access Angular-specific methods
  const tcb = languageService.getTcb(fileName, position);
  const templateLocation = languageService.getTemplateLocationForComponent(fileName, position);
}

Architecture

Angular Language Service is built around several key components:

  • TypeScript Plugin: Integrates with tsserver to provide Angular template support
  • Language Service Core: Extends TypeScript's language service with Angular-specific capabilities
  • Template Analysis: Parses and understands Angular templates and their relationship to TypeScript code
  • Type Checking: Provides type checking for template expressions using Angular compiler
  • Code Fixes & Refactorings: Automated fixes and transformations for Angular-specific issues
  • Testing Framework: Comprehensive utilities for testing language service integrations

Capabilities

TypeScript Plugin Integration

The main entry point that integrates Angular Language Service with TypeScript Language Server as a plugin.

declare const factory: ts.server.PluginModuleFactory;

TypeScript Plugin

Language Service API

Core Angular Language Service interface that extends TypeScript's language service with Angular-specific methods for template analysis and navigation.

interface NgLanguageService extends ts.LanguageService {
  getTcb(fileName: string, position: number): GetTcbResponse | undefined;
  getComponentLocationsForTemplate(fileName: string): GetComponentLocationsForTemplateResponse;
  getTemplateLocationForComponent(fileName: string, position: number): GetTemplateLocationForComponentResponse;
  getTypescriptLanguageService(): ts.LanguageService;
  applyRefactoring(fileName: string, positionOrRange: number | ts.TextRange, refactorName: string, reportProgress: ApplyRefactoringProgressFn): Promise<ApplyRefactoringResult | undefined>;
  hasCodeFixesForErrorCode(errorCode: number): boolean;
  getTokenTypeFromClassification(classification: number): number | undefined;
  getTokenModifierFromClassification(classification: number): number;
}

type GetTcbResponse = {
  fileName: string;
  content: string;
  selections: ts.TextSpan[];
};

type GetComponentLocationsForTemplateResponse = ts.DocumentSpan[];
type GetTemplateLocationForComponentResponse = ts.DocumentSpan | undefined;
type ApplyRefactoringProgressFn = (percentage: number, updateMessage: string) => void;

Language Service API

Configuration

Configuration options for customizing Angular Language Service behavior and integrating with different Angular versions.

interface PluginConfig {
  angularOnly: boolean;
  forceStrictTemplates?: true;
  enableBlockSyntax?: false;
  angularCoreVersion?: string;
  enableLetSyntax?: false;
  enableSelectorless?: true;
  suppressAngularDiagnosticCodes?: number[];
}

Configuration

Testing Framework

Comprehensive testing utilities for creating in-memory Angular projects and testing language service integrations.

class LanguageServiceTestEnv {
  static setup(): LanguageServiceTestEnv;
  addProject(name: string, files: ProjectFiles, angularCompilerOptions?: TestableOptions, tsCompilerOptions?: ts.CompilerOptions): Project;
  getTextFromTsSpan(fileName: string, span: ts.TextSpan): string | null;
  expectNoSourceDiagnostics(): void;
}

class Project {
  readonly name: string;
  readonly ngLS: LanguageService;
  
  openFile(projectFileName: string): OpenBuffer;
  getDiagnosticsForFile(projectFileName: string): ts.Diagnostic[];
  getCodeFixesAtPosition(projectFileName: string, start: number, end: number, errorCodes: readonly number[]): readonly ts.CodeFixAction[];
  applyRefactoring(fileName: string, positionOrRange: number | ts.TextRange, refactorName: string, reportProgress: ApplyRefactoringProgressFn): Promise<ApplyRefactoringResult | undefined>;
}

type ProjectFiles = { [fileName: string]: string };

Testing Framework

Available Refactorings

Angular Language Service provides several built-in refactorings for modernizing Angular code:

Signal Input Refactorings

// Available refactoring names for signal input conversion
type SignalInputRefactorings = 
  | "convert-field-to-signal-input-safe-mode"
  | "convert-field-to-signal-input-best-effort-mode"
  | "convert-full-class-to-signal-inputs-safe-mode"
  | "convert-full-class-to-signal-inputs-best-effort-mode";

Signal Query Refactorings

// Available refactoring names for signal query conversion
type SignalQueryRefactorings = 
  | "convert-field-to-signal-query-safe-mode"
  | "convert-field-to-signal-query-best-effort-mode"
  | "convert-full-class-to-signal-queries-safe-mode"
  | "convert-full-class-to-signal-queries-best-effort-mode";

Common Angular Error Codes

Angular Language Service provides code fixes for the following error categories:

// Angular-specific error codes that have available code fixes
const ANGULAR_ERROR_CODES = {
  INVALID_BANANA_IN_BOX: 8101,      // Fixes ([event]) → (event)  
  UNUSED_STANDALONE_IMPORTS: 8102,   // Removes unused imports
  SCHEMA_INVALID_ELEMENT: 8001,      // Adds missing component imports
  MISSING_PIPE: 8004,                // Adds missing pipe imports
  MISSING_REQUIRED_INPUTS: 8007      // Adds required input properties
};

Types

interface ApplyRefactoringResult extends Omit<ts.RefactorEditInfo, 'notApplicableReason'> {
  errorMessage?: string;
  warningMessage?: string;
}

function isNgLanguageService(ls: ts.LanguageService | NgLanguageService): ls is NgLanguageService;