How can I programmatically detect template errors like "property does not exist" in Angular?

I have a simple Angular app:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

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

bootstrapApplication(App);


As expected, Angular throws template errors because foo and bar are not defined in the App component:

✘ [ERROR] NG9: Property 'foo' does not exist on type 'App'. [plugin angular-compiler]

src/main.ts:7:11:
7 │ <div>{{ foo }} {{ bar }}</div>
╵ ~~~

✘ [ERROR] NG9: Property 'bar' does not exist on type 'App'. [plugin angular-compiler]

src/main.ts:7:21:
7 │ <div>{{ foo }} {{ bar }}</div>


My question is:

Is there a way to get these kinds of errors programmatically using the Angular compiler, Angular Language Service, or the TypeScript API?

Ideally, I’d like to pass a file (or just the template string) and receive these errors back.

I try to do it using ts-morph and getLanguageService but I got other errors but not those errors:

const languageService = project.getLanguageService();
componentsClasses.forEach((cls: ClassDeclaration) => {
const a = languageService.getSuggestionDiagnostics(cls.getSourceFile());
console.log(a.map((d) => `${d.getSourceFile().getFilePath()} ${d.getCode()} ${d.getMessageText()}`));
});

Continue reading...