如何通过编程方式检测Angular模板中的“属性不存在”类错误？

我太懂你卡在这儿的感受了——就是想直接捕获Angular模板里那种像foo/bar未定义的属性错误，结果用ts-morph的Language Service只拿到了一堆无关的TypeScript语法错误，完全没命中目标对吧？这太正常了，因为普通的TypeScript语言服务根本不会处理Angular模板的专属校验逻辑，得用Angular自己的工具链才行。

下面给你几个亲测有效的方案，都能精准拿到你想要的那些模板属性错误：

方案一：用Angular Compiler API（适合完整组件/模块场景） #

Angular核心编译器本身就会做模板绑定的校验，我们可以直接实例化Compiler，编译组件所在的模块，就能提取到对应的诊断信息。

给你贴一段可运行的代码示例：

import { Compiler, CompilerFactory, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 模拟你的测试组件（或者从本地文件读取组件类）
class TestComponent {
  name = 'Angular';
  // 故意不定义foo和bar，触发模板错误
}

// 先创建一个空的NgModule来承载组件
@NgModule({
  declarations: [TestComponent]
})
class TestModule {}

// 获取Angular的Compiler实例
const compilerFactory = platformBrowserDynamic().injector.get(CompilerFactory);
const compiler = compilerFactory.createCompiler();

// 编译模块并提取诊断信息
compiler.compileModuleAndAllComponentsAsync(TestModule)
  .then(moduleFactory => {
    // 找到我们的测试组件工厂
    const componentFactory = moduleFactory.componentFactories.find(f => f.componentType === TestComponent);
    if (componentFactory) {
      // 获取组件的编译诊断
      const diagnostics = compiler.getComponentDiagnostics(TestComponent);
      diagnostics.forEach(diag => {
        console.log(`[错误代码 ${diag.code}] ${diag.message}`);
        if (diag.span) {
          console.log(`位置: 从第${diag.span.start}个字符到第${diag.span.end}个字符`);
        }
      });
    }
  })
  .catch(err => {
    // 这里也会直接抛出编译错误，包括模板里的属性不存在问题
    console.error('编译时捕获到错误:', err);
  });

运行这段代码，你就能拿到和Angular CLI编译时完全一致的“属性不存在”错误提示。

方案二：用Angular Language Service API（适合处理单个文件/字符串模板） #

如果你更倾向于直接处理文件内容或者模板字符串，Angular Language Service（就是给VS Code等编辑器提供智能提示的那个服务）是更好的选择——它专门负责模板的语法和绑定校验，能精准捕获这类属性错误。

代码示例如下：

import { createLanguageService } from '@angular/language-service';
import * as ts from 'typescript';

// 模拟你的组件文件内容
const componentCode = `
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: \`<div>{{ foo }} {{ bar }}</div>\`
})
export class App {
  name = 'Angular';
}
`;

// 配置TypeScript编译选项
const tsConfig: ts.CompilerOptions = {
  target: ts.ScriptTarget.ES2020,
  module: ts.ModuleKind.CommonJS,
  strict: true,
  experimentalDecorators: true,
  emitDecoratorMetadata: true,
  lib: ['ES2020', 'DOM'],
  types: ['@angular/core']
};

// 创建虚拟的TypeScript源文件
const sourceFile = ts.createSourceFile(
  'test.component.ts',
  componentCode,
  ts.ScriptTarget.ES2020,
  true
);

// 创建一个模拟的TypeScript Program
const program = ts.createProgram(
  ['test.component.ts'],
  tsConfig,
  {
    getSourceFile: fileName => fileName === 'test.component.ts' ? sourceFile : undefined,
    writeFile: () => {},
    getDefaultLibFileName: () => ts.getDefaultLibFilePath(tsConfig),
    useCaseSensitiveFileNames: () => false,
    getCanonicalFileName: f => f,
    getCurrentDirectory: () => '',
    getNewLine: () => '\n',
    readFile: () => '',
    fileExists: f => f === 'test.component.ts'
  }
);

// 初始化Angular Language Service
const ngLanguageService = createLanguageService(program, {
  getProgram: () => program,
  getProjectVersion: () => '1',
  getCompilationSettings: () => tsConfig,
  getDefaultLibFileName: () => ts.getDefaultLibFilePath(tsConfig),
  readFile: () => '',
  fileExists: f => f === 'test.component.ts'
});

// 获取模板的诊断错误
const diagnostics = ngLanguageService.getDiagnostics('test.component.ts');
diagnostics.forEach(diag => {
  console.log(`[${diag.code}] ${diag.messageText}`);
  console.log(`出错位置: 行内偏移 ${diag.start}，长度 ${diag.length}`);
});

这个方案的优势是可以直接处理字符串形式的组件代码，不需要构建完整的Angular应用，非常适合做批量校验或者工具类场景。

方案三：直接编译模板字符串（轻量场景） #

如果你只需要校验单独的模板片段，不需要完整的组件类文件，可以用@angular/compiler的compileTemplate方法，直接传入模板和组件的元数据就行：

import { parseTemplate, compileTemplate, CompilerConfig } from '@angular/compiler';

// 要校验的模板字符串
const templateString = `<div>{{ foo }} {{ bar }}</div>`;

// 解析模板
const parsedTemplate = parseTemplate(templateString, 'test.html');

// 开启严格模板校验的配置
const config = new CompilerConfig({ strictTemplates: true });

// 编译模板，传入组件的成员信息（模拟只有name属性，没有foo/bar）
const compilationResult = compileTemplate({
  config,
  template: parsedTemplate,
  componentType: {
    name: 'TestComponent',
    members: [{ name: 'name', type: 'string' }]
  }
});

// 输出诊断错误
compilationResult.diagnostics.forEach(diag => {
  console.log(`模板错误: ${diag.message}`);
});

这个方案最轻量化，适合快速校验单个模板片段的绑定问题。

为什么之前用ts-morph没拿到结果？ #

普通的TypeScript Language Service（包括ts-morph封装的）只会处理.ts文件里的TypeScript代码逻辑，完全不会解析@Component装饰器里的模板内容，更不会做Angular专属的模板绑定校验——所以你之前拿到的都是TypeScript本身的语法错误，而非模板里的属性不存在问题。必须用Angular自己的编译或语言服务工具链才能捕获这类错误。

内容来源于stack exchange