Inputs with `$` suffix prevent elements from being recognized

[bstrandjev]

🐞 bug report

Is this a regression?

Yes and no. This still works for Angular < 12. Also it seems to be similar to issue: #1109
However, i never got a setup that worked for Angular 13.

Description

A clear and concise description of the problem...

I am using recent Visual Studio code and it works ok with Angular 12, however, for Angular 13 projects all my custom components that are under *ngIf DOM element can not be navigated to. I can not navigate to them to using CTRL + mouse click. Also right click and Go to definition tells me "No definition found".

I have read this issue thread and I tried setting "angular.experimental-ivy": false in my Visual Studio code, but to no avail.

I am using Visual Studio Code on Ubuntu with the following versions:

Version: 1.62.3
Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
Date: 2021-11-17T08:00:36.721Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.4.0-90-generic snap

The Angular I tried using is 13.0.1.

Bug Type

What does this bug affect

• [x ] Angular Language Service VSCode extension
• Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. Load whatever Angular 13 project in Visual Studio Code
2. Open any HTML file with *ngIf protected DOM element
3. Try navigating (e.g. with CTRL + mouse click) to any element listed under it: either custom component or template varible
4. Nothing will happen.
5. Right click -> Go to definition triggers "No definition found for"

Expected behavior

The navigation should work as for older angular versions

🌍 Your Environment

Angular Version:

13.0.1.

VSCode Version:

1.62.3

Operating System:

Linux x64 5.4.0-90-generic snap

Extension options:

"angular.experimental-ivy": false

[atscott]

@bstrandjev - what are your angularCompilerOptions in the tsconfig? In version 12, the default became the ivy version of the language service. With this, the compiler options that you've configured for compiling your application are the exact ones used in the language service. This means that the information you see will match what the compiler understands during the application build. If you do not have strictTemplates: true, this will often mean you will see things like this, specifically with structural directives.

[bstrandjev]

Hi @atscott thanks for the quick reaction and for the additional hint. I did not have "strictTemplates": true in my tsconfig.json. Now I added it, but it made no difference. Either way, without claiming to fully understand your explanation, I think this reasoning would not justify why I have no problem in projects configured with Angular 12, but Angular 13 is problematic.

[atscott]

@bstrandjev Could you also check if you have the "Legacy View Engine" option enabled in the extension options? If so, try disabling that.

[bstrandjev]

@atscott it has been disabled all along

[atscott]

@bstrandjev Are you able to provide a minimal reproduction of the problem with a github repo? If not, there's not much more that can be done here for investigation.

[bstrandjev]

@atscott I should be able to (obviously setup and tested on my environment). However, this will be in few hours. Thanks for being available 24 / 7

[bstrandjev]

@atscott I have created an example repo here: https://github.com/qualifast/VSCodeNavigationBug

Actually, as I was setting up the example it turned out another situation was the trigger of the problem, not as per my initial analysis:

Navigation to components with Observable inputs is broken, it seems. This is not affected by *ngIf check presence. However, I remain convinced this is also connected with Angular version, because I have other projects setup to use Angular 12 and they do not exhibit the problem.

[ilya-marinov-axon]

@bstrandjev @atscott
I have the same problem, after updating Angular version to 13 on work project, VSCode starts highlight angular syntax in templates with messages like: "Can't bind to 'ngSwitch'...", "router-outlet is not a known element" and etc... At the same time everything compiles well.

I've created new test project with Angular 13 version and had same issue there. My suggestion that this is something wrong with extension.

[atscott]

@ilya-marinov-axon Do you have the legacy view engine option enabled in the extension options?

View Engine support was was dropped in v13

@bstrandjev I do not see any issues with the project you've provided (unless I enabled the "View-engine" option which will not work with v13 projects). The only other time I saw issues was when I did not have the dependencies installed in node_modules. After installing the dependencies (yarn/npm install), you have to run the Restart Angular language server command.

[bstrandjev]

@atscott can you navigate to exp-example using ctrl + mouse click in app.component.html in my code?
How does one "run the Restart Angular language server command." in VS Code?

[atscott]

@atscott can you navigate to exp-example using ctrl + mouse click in app.component.html in my code?

Yes, I can.

How does one "run the Restart Angular language server command." in VS Code?

It's in the command palette

[atscott]

@bstrandjev Can you also attach the server logs? These steps are outlined in the template for submitting a new issue:

Logs

Log file gives us deep insight into the behavior and performance of the extension. If the issue is a performance
problem or an error occured, please provide the output of the log file below.

Set Angular Log level to verbose.

 If the issue is accompanied by log file output, please share it below.

Set the Angular Log level to verbose by opening settings (File/Preferences/Settings on Windows, Code/Preferences/Settings on Mac), go to Extensions/Angular Language Service, set `angular.log` to `verbose`.

To open the log file, go to the command palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows), search `Open Angular Server log`.

Alternatively, if the log file is long, it can be uploaded instead of pasting below. 

[bstrandjev]

@atscott Sorry, I missed this part in the bug template, agreed.
I am not sure how I can trigger specific logs, so I just enabled in verbose and directly attaching the log.

angular.log

I also confirm that restarting the server did not fix my issue.