ng-template Error: The template context does not define a member called ... (Kendo Grid)

Question

I have an issue when trying to use ng-template with Kendo Grid in Angular. The html I have is valid and compiles and functions properly when launched, but then Visual Studio Code shows this error:

The template context does not define a member called column

Here is my code:

<kendo-grid-column field="countryID"
  title="{{ 'location.country' | translate }}"
  width="10">
  <ng-template kendoGridEditTemplate
    let-dataItem="dataItem"
    let-column="column"
    let-formGroup="formGroup">
    <app-dropdown-single
      [placeholder]="column.title"
      [formControl]="formGroup?.controls['countryID']"
      [data]="dataDdwCountry"
      valueField="id">
    </app-dropdown-single>
  </ng-template>
</kendo-grid-column>

So Visual Studio Code gives me the error for the 3 parameters of the ng-template. However, when compiled the placeholder does show the correct value of "column". If I leave it just **let-column** instead of **let-column="column"** the error disappears, but so does the value I need (column is now left undefined and I need the value).

Can anyone help with this?

Answer 1

Update: This ng-template error appears to have been resolved by Angular Language Service version v0.900.11+ Please try that version or greater before rolling back to any previous version as indicated below.

Original: This is related to the Angular Language Service extension running in VS Code. Specifically, any version of the service that is currently greater than v0.900.4. Check which version of the Angular Language Service you currently have installed by looking at the installed extensions tab in VS Code.

Until either this is fixed by the Angular Language Service team or the Kendo UI team (not sure who is at fault), you can temporarily disable auto updating of extensions in VS Code and install version v0.900.4 of the the Angular Language Service by installing the .vsix file from the GitHub Releases page here: https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.4

The instructions for installing the .vsix file are on the extension info page for the Angular Language Service that comes up in VS Code when you click on the extension in the extensions tab. I included them here:

Installing a particular release build

Download the .vsix file for the release that you want to install from the releases tab.

Do not open the .vsix file directly. Instead, in Visual Studio code, go to the extensions tab. Click on the "..." menu in the upper right corner of the extensions tab, select "Install from vsix..." and then select the .vsix file for the release you just downloaded.

The extension can also be installed with the following command:

code --install-extension /path/to/ngls.vsix