Skip to content

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 +1682
/**
* 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)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Now, the getDirectiveMatchesForElementTag and visitor are located in the language service, so I pass a class to the type checker.

Comment on lines +1576 to +1682
/**
* 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)

@ivanwonder ivanwonder requested a review from atscott June 23, 2025 14:03
}

const directiveForDiagnostic = templateTypeChecker.getDirectiveMetadata(decl);
if (directiveForDiagnostic === null || !directiveForDiagnostic.isComponent) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Only the component will report the deprecated diagnostic here.

@ivanwonder ivanwonder requested a review from atscott June 26, 2025 08:11
@ivanwonder ivanwonder force-pushed the support-suggestion-diagnostics branch from 1056e1f to fcc3f85 Compare June 27, 2025 09:00
@atscott atscott force-pushed the support-suggestion-diagnostics branch from fcc3f85 to fbb1f30 Compare July 9, 2025 17:58
@ivanwonder ivanwonder force-pushed the support-suggestion-diagnostics branch from fbb1f30 to 491d0d7 Compare July 11, 2025 04:09
@ivanwonder ivanwonder requested a review from atscott July 11, 2025 04:13
…emplate

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

Fixes angular#59343
@atscott atscott force-pushed the support-suggestion-diagnostics branch from 491d0d7 to 9a29a7c Compare July 14, 2025 17:23
@atscott atscott added target: minor This PR is targeted for the next minor release action: merge The PR is ready for merge by the caretaker labels Jul 14, 2025
@AndrewKushnir AndrewKushnir added action: presubmit The PR is in need of a google3 presubmit and removed action: presubmit The PR is in need of a google3 presubmit labels Jul 14, 2025
@AndrewKushnir
Copy link
Contributor

This PR was merged into the repository by commit d64dd27.

The changes were merged into the following branches: main

@ivanwonder ivanwonder deleted the support-suggestion-diagnostics branch July 15, 2025 00:19
@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 Aug 15, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: language-service Issues related to Angular's VS Code language service detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show deprecated template items in IDE

3 participants