Vscode-ng-language-service: This plugin is ignoring the type when using the "keyvalue" pipe.

Created on 26 Oct 2020 · 6Comments · Source: angular/vscode-ng-language-service

Describe the bug

Using the keyvalue pipe throws errors in template.

Identifier 'myProperty' is not defined. 'V' does not contain such a member. (ng)

Because this error is only in the VS Code html file, I guess that this is related to this extension. The build works.

To Reproduce

Steps to reproduce the behavior:

Use the keyvalue pipe on a property with a custom type. See my source code blocks / graphics or download the demo (see below).
See that all properties of value are marked as error. The pipe does not pass the type correctly.
Build it. It works. But the error in editor persists. It seems to be related to the ng extension.
Try restart of VS Code. Nothing helped.

Source Code

app.component.html

<ul>
  <li *ngFor="let entry of menuService.menu | keyvalue">
    <span>{{ entry.value.text }}</span>
  </li>
</ul>

menu-items.model.ts

export interface MenuItem {
  text: string;
}

export interface Menu {
  [key: string]: MenuItem;
}

Other (Snippets):

// app.component.ts
import { MenuService } from './menu-items/menu-items.service';
export class AppComponent {
  constructor(public menuService: MenuService) {}
}

// menu-items.service.ts
import { Menu, MenuItem } from './menu-items.model';
public menu: Menu = {};
// See model (above).

Expected behavior

No error when using the keyvalue pipe. I think it's a correct use of it. It works everywhere.

Logs

Identifier 'text' is not defined. 'V' does not contain such a member. (ng)

Screenshots

demo
(Gif Animation. Wait for the first frame in app.component.html)

Additional context

Download Demo Project

Versions

VS Code:

Version: 1.50.1 (user setup)
Commit: d2e414d9e4239a252d1ab117bd7067f125afd80a
Date: 2020-10-13T15:06:15.712Z
Electron: 9.2.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19041

Angular Language Service (VS Code Extension): 0.1001.0

Angular CLI (ng --version):

Angular CLI: 11.0.0-rc.0
Node: 10.22.1
OS: win32 x64

Angular: 11.0.0-rc.0    
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0-rc.0
@angular-devkit/build-angular   0.1100.0-rc.0
@angular-devkit/core            11.0.0-rc.0
@angular-devkit/schematics      11.0.0-rc.0
@schematics/angular             11.0.0-rc.0
@schematics/update              0.1100.0-rc.0
rxjs                            6.6.3
typescript                      4.0.3

Info

Created a new Angular app for this demo using the Angular CLI 11 with default settings. No special configs. Just a simple single app repository.

See current Angular repo pipe source code.

Workaround

No solution yet. It's really annoying. We need a solution. Any guesses?

bug

Source

infacto

👍1

All 6 comments

Same here. Tested with the latest version.

y0nd0 on 31 Oct 2020

The output log of Angular Language Service is mostly empty. But on mouse interaction there are some errors about No config file for. e.g.

[Error - 10:57:44] No config file for repo-root\node_modules\@angular\common\common.d.ts

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

infacto on 2 Nov 2020

Ok, I found out that the pipe from Anglar 11.0.0-next.3 works but 11.0.0-next.4 does not work. File new issue on Angular common issue tracker. But don't know if this is a bug in this extension or in the pipe itself.

infacto on 2 Nov 2020

Ok, in the referenced issue you can see.

This is a bug in the language service as reported in https://github.com/angular/angular/issues/21224

infacto on 2 Nov 2020

As @infacto mentioned, this is a known issue (angular/angular#21224) and is fixed by the Ivy language service, which will be beta released in Angular 11 (#335 (comment)). As such, I am closing this report.