This plugin is ignoring the type when using the "keyvalue" pipe.

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:

1. Use the keyvalue pipe on a property with a custom type. See my source code blocks / graphics or download the demo (see below).
2. See that all properties of value are marked as error. The pipe does not pass the type correctly.
3. Build it. It works. But the error in editor persists. It seems to be related to the ng extension.
4. 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

(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?

[ayazhafiz]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}