@angular/language-service

The TypeScript-language-service plugin that powers Angular features in editors: completions, hover, go-to-definition, refactors, and template diagnostics. Roughly 36,000 lines of TypeScript — the second-most invested-in editor experience in the JavaScript ecosystem after TypeScript itself.

Purpose

@angular/language-service is loaded by:

• The Angular VS Code extension (built from vscode-ng-language-service/).
• WebStorm / IntelliJ via the same tsserver plugin protocol.
• Any other editor that supports TypeScript LSP and accepts custom plugins.

It re-uses the ngtsc analyzer to keep editor diagnostics consistent with tsc's diagnostics. Differences between editor and CLI diagnostics are bugs.

Directory layout

packages/language-service/
├── src/
│   ├── language_service.ts       # The TS plugin entry point
│   ├── completions.ts            # Template + decorator completions
│   ├── definitions.ts            # Go-to-definition
│   ├── references.ts             # Find-references
│   ├── hover.ts                  # Hover info
│   ├── quick_info.ts             # Inline tooltip
│   ├── code_fixes/                # Auto-fixes (e.g., add missing import)
│   ├── refactorings/              # Larger refactor providers
│   ├── diagnostics.ts            # Surface TCB diagnostics
│   ├── compiler/                 # Wraps NgtscProgram for editor use
│   ├── utils/
│   └── ...
└── api/                          # Public language-service API

Key abstractions

Type / function	File	What it is
LanguageService	packages/language-service/src/language_service.ts	The top-level entry the editor talks to.
Compiler	packages/language-service/src/compiler.ts	Adapter that wraps NgtscProgram for incremental editor use.
CompletionBuilder	packages/language-service/src/completions.ts	Computes completion lists for a position in a template.
getDefinitionAndBoundSpan	packages/language-service/src/definitions.ts	Resolves a position to a TypeScript symbol.
getQuickInfoAtPosition	packages/language-service/src/quick_info.ts	Hover-tooltip data.

How completions work

graph LR
  Editor["Editor cursor in template"] --> Plugin["Angular LS plugin"]
  Plugin --> Compiler["NgtscProgram (warm cache)"]
  Compiler --> TCB["Type-check block (synthetic TS)"]
  Plugin --> TS["TS language service<br/>(operate on TCB)"]
  TS --> Completions["TS completion list"]
  Plugin --> Map["Remap TCB completions<br/>to template positions"]
  Map --> Editor

The trick is that the language service operates on the generated type-check block but exposes results back at the original template position. The remapping logic is shared with the CLI compiler and lives in packages/compiler-cli/src/ngtsc/typecheck/.

Integration points

• @angular/compiler-cli — the language service consumes ngtsc directly. Most LS bugs are bugs in ngtsc's incremental cache or the TCB generator.
• vscode-ng-language-service — the VS Code extension that wraps the plugin. It owns the LSP server boilerplate; the heavy lifting happens here.
• TypeScript's plugin host — registered as a ts-plugin in tsconfig.json's compilerOptions.plugins.

Entry points for modification

• A new completion source: extend packages/language-service/src/completions.ts, add a corresponding test in test/.
• A new code fix: add a provider under packages/language-service/src/code_fixes/, register it in the entry point.
• A new refactor: same pattern under packages/language-service/src/refactorings/.

Tests use a custom mock host that simulates a TypeScript project; see packages/language-service/test/ for the harness.