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

typescript-plugin.mddocs/

TypeScript Plugin Integration

TypeScript plugin factory that integrates Angular Language Service with TypeScript Language Server (tsserver) to provide Angular template support in IDEs.

Capabilities

Plugin Factory

Main factory function that creates the Angular Language Service plugin for TypeScript server integration.

/**
 * TypeScript server plugin factory for Angular Language Service integration
 * This is the main export that tsserver uses to instantiate the Angular plugin
 */
declare const factory: ts.server.PluginModuleFactory;

Usage in tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@angular/language-service",
        "angularOnly": true,
        "forceStrictTemplates": true,
        "enableBlockSyntax": false,
        "suppressAngularDiagnosticCodes": [2345, 2322]
      }
    ]
  }
}

Plugin Module Interface

Internal interface that defines the plugin module structure for TypeScript server integration.

interface PluginModule extends ts.server.PluginModule {
  /**
   * Creates an Angular Language Service instance
   * @param createInfo - TypeScript plugin creation info
   * @returns NgLanguageService instance
   */
  create(createInfo: ts.server.PluginCreateInfo): NgLanguageService;
  
  /**
   * Gets external files that should be included in the project
   * @param project - TypeScript server project
   * @param updateLevel - Program update level (Full, RootNamesAndUpdate, Update)
   * @returns Array of external file paths
   */
  getExternalFiles?(project: ts.server.Project, updateLevel: ts.ProgramUpdateLevel): string[];
  
  /**
   * Handles configuration changes for the plugin
   * @param config - Updated plugin configuration
   */
  onConfigurationChanged?(config: PluginConfig): void;
}

Factory Implementation

The factory function that creates and configures the plugin module.

/**
 * Creates a TypeScript server plugin module for Angular Language Service
 * @param tsModule - TypeScript module instance
 * @returns Plugin module with create and configuration methods
 */
export declare const factory: (tsModule: typeof ts) => PluginModule;

Plugin Lifecycle:

  1. TypeScript server loads the plugin using the factory
  2. Factory creates a plugin module with create method
  3. create method instantiates the Angular Language Service
  4. Plugin provides Angular-specific language features to the IDE
  5. Configuration changes trigger onConfigurationChanged if provided

Override Rename Plugin

Separate plugin factory that disables TypeScript's built-in rename provider when Angular is detected, allowing Angular's rename functionality to take precedence.

/**
 * Plugin factory that overrides TypeScript's rename functionality in Angular projects
 * Used to ensure Angular-specific rename behavior takes precedence
 */
declare const factory: ts.server.PluginModuleFactory;

/**
 * Override plugin module interface
 * Provides getRenameInfo that delegates to Angular when Angular core is detected
 */
interface OverridePluginModule extends ts.server.PluginModule {
  create(info: ts.server.PluginCreateInfo): ts.LanguageService;
}

Usage:

This plugin is typically configured automatically by IDE extensions or can be manually added to tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@angular/language-service/override_rename_ts_plugin"
      }
    ]
  }
}

How it works:

  1. Detects if Angular core is present in the project by checking for @angular/core/core.d.ts or @angular/core/index.d.ts
  2. When Angular is detected, disables TypeScript's rename functionality with message: "Delegating rename to the Angular Language Service"
  3. Otherwise, uses TypeScript's default rename behavior

Bundle Export

Direct access to the bundled Angular Language Service for advanced integrations.

/**
 * Direct bundle export for advanced integrations
 * Available at @angular/language-service/bundles/language-service.js
 */
declare const bundledLanguageService: (tsModule: typeof ts) => PluginModule;

Usage:

// Advanced usage: Direct bundle import
const languageServiceBundle = require('@angular/language-service/bundles/language-service.js');
const plugin = languageServiceBundle(ts);

Integration Points

IDE Integration

The plugin integrates with popular IDEs through TypeScript Language Server:

  • VS Code: Angular Language Service extension
  • WebStorm/IntelliJ: Built-in Angular support
  • Vim/Neovim: Through LSP clients
  • Emacs: Through LSP mode

Build Tool Integration

Works with various Angular build setups:

  • Angular CLI: Automatic integration
  • Webpack: Through TypeScript loader
  • Vite: Through TypeScript plugin
  • Custom builds: Manual tsconfig.json configuration

Configuration Priority

Plugin configuration is resolved in this order:

  1. IDE-specific settings (VS Code settings, WebStorm preferences)
  2. tsconfig.json plugin configuration
  3. Default Angular Language Service settings
  4. Angular CLI configuration (if present)