CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-angular--language-service

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/language-service@20.2.x
Publish Source
CLI
Badge
tessl/npm-angular--language-service badge