Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(language-service): support to report the deprecated API in the t… #62054

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

ivanwonder
Copy link
Contributor

…emplate

In the Typescript Language Service, these diagnostics are reported as suggestion diagnostics. This will report the deprecated Component, Directive, etc.

Fixes #59343

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: language-service Issues related to Angular's VS Code language service labels Jun 14, 2025
@ngbot ngbot bot added this to the Backlog milestone Jun 14, 2025
Comment on lines +1576 to +1597
/**
* Connect the TCB node to the template node and generate the template diagnostics.
*
* How to generate the template diagnostics:
*
* 1. For each diagnostic, find the TCB node that is reported.
* 2. Build a map called `nodeToDiag` that the key is the type node and value is the diagnostic.
* For example:
* ```
* var _t1 = null! as TestDir;
* ^^^^^^^------ This is diagnostic node that is reported by the ts.
* ```
* The key is the class component of TestDir.
* 3. Find the all directive nodes in the TCB.
* For example:
* In the above example, the directive node is `_t1`, get the type of `_t1` which is the
* class component of `TestDir`. Check if there is a diagnostic in the `nodeToDiag` map
* that matches the class component of `TestDir`.
* If there is a match, it means that the diagnostic is reported for the directive node
* 4. Generate the template diagnostic and return the template diagnostics.
*/
function getTheElementTagDeprecatedSuggestionDiagnostics(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Support the deprecated tag for the component

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we ran into this issue internally as well for the indexing that powers code search: A directive's span applies to the whole element that it is active for (correctly). However, this makes it appear like the element is deprecated when in reality it's just [directive] here. This is pretty problematic. As an example NgFor and NgIf have this problem and when used, make it so the element appears deprecated. Components really have this problem too but it's generally not something that comes up because their selectors are element tag selectors 99% of the time.

I don't think we have any information about the span for the selectors of directives/components. For quick info, we did something like this:

export function getDirectiveMatchesForElementTag<T extends {selector: string | null}>(
export function getDirectiveMatchesForAttribute(

We remove an attribute and see which directives no longer apply and from that information can determine that the selector is necessary for the directive matching. Maybe you can do something similar here? Otherwise I might recommend omitting the directives from this feature and rely on the inputs hopefully being deprecated as well. We did that for the control flow inputs as a workaround for this issue (8885811)

…emplate

In the Typescript Language Service, these diagnostics are reported as suggestion diagnostics.
This will report the deprecated `Component`, `Directive`, etc.

Fixes angular#59343
@ivanwonder ivanwonder force-pushed the support-suggestion-diagnostics branch from c89aa6d to cb893ad Compare June 20, 2025 03:03
@ivanwonder ivanwonder marked this pull request as ready for review June 20, 2025 03:24
@ivanwonder ivanwonder requested a review from atscott June 20, 2025 03:25
Comment on lines +1576 to +1597
/**
* Connect the TCB node to the template node and generate the template diagnostics.
*
* How to generate the template diagnostics:
*
* 1. For each diagnostic, find the TCB node that is reported.
* 2. Build a map called `nodeToDiag` that the key is the type node and value is the diagnostic.
* For example:
* ```
* var _t1 = null! as TestDir;
* ^^^^^^^------ This is diagnostic node that is reported by the ts.
* ```
* The key is the class component of TestDir.
* 3. Find the all directive nodes in the TCB.
* For example:
* In the above example, the directive node is `_t1`, get the type of `_t1` which is the
* class component of `TestDir`. Check if there is a diagnostic in the `nodeToDiag` map
* that matches the class component of `TestDir`.
* If there is a match, it means that the diagnostic is reported for the directive node
* 4. Generate the template diagnostic and return the template diagnostics.
*/
function getTheElementTagDeprecatedSuggestionDiagnostics(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we ran into this issue internally as well for the indexing that powers code search: A directive's span applies to the whole element that it is active for (correctly). However, this makes it appear like the element is deprecated when in reality it's just [directive] here. This is pretty problematic. As an example NgFor and NgIf have this problem and when used, make it so the element appears deprecated. Components really have this problem too but it's generally not something that comes up because their selectors are element tag selectors 99% of the time.

I don't think we have any information about the span for the selectors of directives/components. For quick info, we did something like this:

export function getDirectiveMatchesForElementTag<T extends {selector: string | null}>(
export function getDirectiveMatchesForAttribute(

We remove an attribute and see which directives no longer apply and from that information can determine that the selector is necessary for the directive matching. Maybe you can do something similar here? Otherwise I might recommend omitting the directives from this feature and rely on the inputs hopefully being deprecated as well. We did that for the control flow inputs as a workaround for this issue (8885811)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: language-service Issues related to Angular's VS Code language service detected: feature PR contains a feature commit
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show deprecated template items in IDE
2 participants