Configuration

/**
 * Configuration options for Angular Language Service plugin
 * Used in tsconfig.json plugins section or IDE settings
 */
interface PluginConfig {
  /**
   * If true, return only Angular results. Otherwise, return Angular + TypeScript results.
   * When enabled, TypeScript-only features are disabled in templates.
   */
  angularOnly: boolean;
  
  /**
   * If true, enable `strictTemplates` in Angular compiler options regardless
   * of its value in tsconfig.json. Forces strict template type checking.
   */
  forceStrictTemplates?: true;
  
  /**
   * If false, disables parsing control flow blocks (@if, @for, @switch) in the compiler.
   * Should be used only when older versions of Angular that don't support blocks (pre-v17) 
   * are used with the language service.
   */
  enableBlockSyntax?: false;
  
  /**
   * Version of @angular/core that was detected in the user's workspace.
   * Used to enable/disable version-specific features and optimizations.
   */
  angularCoreVersion?: string;
  
  /**
   * If false, disables parsing of @let declarations in templates.
   * Used for Angular versions that don't support @let syntax.
   */
  enableLetSyntax?: false;
  
  /**
   * Whether selectorless components are enabled.
   * Allows components without CSS selectors in newer Angular versions.
   */
  enableSelectorless?: true;
  
  /**
   * List of Angular diagnostic codes that should be suppressed in the language service.
   * Useful for disabling specific Angular template errors or warnings.
   */
  suppressAngularDiagnosticCodes?: number[];
}

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

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

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@angular/language-service",
        "angularOnly": true,
        "enableBlockSyntax": false,
        "enableLetSyntax": false,
        "angularCoreVersion": "16.2.0"
      }
    ]
  }
}

<!-- With angularOnly: true -->
<div>{{ user.| }}</div> <!-- Only Angular pipe completions -->

<!-- With angularOnly: false -->
<div>{{ user.| }}</div> <!-- Angular pipes + TypeScript string methods -->

@if (user.isActive) {
  <div>Active user</div>
} @else {
  <div>Inactive user</div>
}

<div *ngIf="user.isActive; else inactive">Active user</div>
<ng-template #inactive>Inactive user</ng-template>

@let userName = user.name;
@let userAge = user.age;
<div>{{ userName }} is {{ userAge }} years old</div>

@Component({
  // No selector property
  template: '<div>Selectorless component</div>'
})
export class MyComponent { }

{
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "typescript.suggest.autoImports": true,
  "angular.experimental-ivy": true,
  "angular.enable-strict-mode-prompt": true
}

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

// Configuration can be updated at runtime through the plugin module
const newConfig: PluginConfig = {
  angularOnly: false,
  forceStrictTemplates: true,
  suppressAngularDiagnosticCodes: [2345]
};

// Plugin module's onConfigurationChanged method handles updates
plugin.onConfigurationChanged?.(newConfig);

// Different configurations for development vs production
const isDevelopment = process.env.NODE_ENV === 'development';

const config: PluginConfig = {
  angularOnly: !isDevelopment, // Allow TypeScript features in development
  forceStrictTemplates: true,
  suppressAngularDiagnosticCodes: isDevelopment ? [2345, 2322] : []
};