Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode Angular language-service mark template errors in TypeScript file #41032

Closed
netdjw opened this issue Feb 28, 2021 · 2 comments · Fixed by ngstack/translate#644
Closed
Assignees
Labels
area: language-service Issues related to Angular's VS Code language service P2 The issue is important to a large percentage of users, with a workaround
Milestone

Comments

@netdjw
Copy link

netdjw commented Feb 28, 2021

🐞 bug report

Affected Package

The issue is caused by package @angular/language-service

Is this a regression?

I don't know, the issue has been present for some time.

Description

When I open typescrtipt files I see these errors:

image

image

Both errors should be present in the HTML template, not in the TypeScript code, and it's very annoying.

🔬 Minimal Reproduction

I tried to create a reprodction, but it came out of unknown reason. If I copy-paste my codes to StackBlitz the issue isn't shown.

Instead of this I shared some printscreens above.

🔥 Exception or Error

See above on printscreens.

🌍 Your Environment

Angular Version:


Angular CLI: 6.0.8
Node: 12.15.0
OS: win32 x64
Angular: 6.1.10
... core

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.6.8
@angular-devkit/build-angular       0.6.8
@angular-devkit/build-optimizer     0.6.8
@angular-devkit/core                0.6.8
@angular-devkit/schematics          0.6.8
@angular/animations                 6.1.9
@angular/cdk                        6.4.7
@angular/cli                        6.0.8
@angular/common                     6.1.9
@angular/compiler                   6.1.9
@angular/compiler-cli               6.1.9
@angular/forms                      6.1.9
@angular/http                       6.1.9
@angular/language-service           6.1.9
@angular/material                   6.4.7
@angular/platform-browser           6.1.9
@angular/platform-browser-dynamic   6.1.9
@angular/platform-server            6.1.9
@angular/router                     6.1.9
@ngtools/webpack                    6.0.8
@schematics/angular                 0.6.8
@schematics/update                  0.6.8
rxjs                                6.2.2
typescript                          2.7.2
webpack                             4.8.3

Anything else relevant?


code -v
1.53.2
622cb03f7e070a9670c94bae1a45d78d7181fbd4
x64


Angular Language Service version v11.2.3

Op.sys: Windows 10 Home
@netdjw
Copy link
Author

netdjw commented Feb 28, 2021

I see some other wierd error signals, like this:

[class.scrolling]="headerScrolling | async"

It say No pipe found with name 'async'.ngtsc(-998004)

And the I see in the TypeScript file in same position on the screen:

image

If I scroll down, it doesn't disappear.

The ng build run without any errors.

@atscott atscott added area: language-service Issues related to Angular's VS Code language service P2 The issue is important to a large percentage of users, with a workaround labels Mar 1, 2021
@ngbot ngbot bot added this to the Backlog milestone Mar 1, 2021
alxhub added a commit to alxhub/angular that referenced this issue Mar 3, 2021
… files

The compiler considers template diagnostics to "belong" to the source file
of the component using the template. This means that when diagnostics for
a source file are reported, it returns diagnostics of TS structures in the
actual source file, diagnostics for any inline templates, and diagnostics of
any external templates.

The Language Service uses a different model, and wants to show template
diagnostics in the actual .html file. Thus, it's not necessary (and in fact
incorrect) to include such diagnostics for the actual .ts file as well.
Doing this currently causes a bug where external diagnostics appear in the
TS file with "random" source spans.

This commit changes the Language Service to filter the set of diagnostics
returned by the compiler and only include those diagnostics with spans
actually within the .ts file itself.

Fixes angular#41032
@zarend zarend closed this as completed in bb6e5e2 Mar 3, 2021
zarend pushed a commit that referenced this issue Mar 3, 2021
… files (#41070)

The compiler considers template diagnostics to "belong" to the source file
of the component using the template. This means that when diagnostics for
a source file are reported, it returns diagnostics of TS structures in the
actual source file, diagnostics for any inline templates, and diagnostics of
any external templates.

The Language Service uses a different model, and wants to show template
diagnostics in the actual .html file. Thus, it's not necessary (and in fact
incorrect) to include such diagnostics for the actual .ts file as well.
Doing this currently causes a bug where external diagnostics appear in the
TS file with "random" source spans.

This commit changes the Language Service to filter the set of diagnostics
returned by the compiler and only include those diagnostics with spans
actually within the .ts file itself.

Fixes #41032

PR Close #41070
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.