feat(language-service): support fix the component missing member #46764

ivanwonder · 2022-07-09T13:53:51Z

The diagnostic of the component missing member comes from the ts service,
so the all code fixes for it are delegated to the ts service.

The code fixes are placed in the LS package because only LS can benefit from
it now, and The LS knows how to provide code fixes by the diagnostic and NgCompiler.

The class CodeFixes is useful to extend the code fixes if LS needs to
provide more code fixes for the template in the future. The ts service uses
the same way to provide code fixes.

https://github.com/microsoft/TypeScript/blob/162224763681465b417274383317ca9a0a573835/src/services/codeFixProvider.ts#L22

Fixes angular/vscode-ng-language-service#1610

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

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.io 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

atscott

This looks great overall! Thanks for the hard work on this 👌

packages/language-service/src/codefixes/index.ts

packages/language-service/src/codefixes/utils.ts

packages/language-service/src/codefixes/fix_missing_member.ts

packages/language-service/test/code_fixes_spec.ts

ivanwonder · 2022-07-16T04:50:56Z

@atscott Sorry for the delay! You can review it now.

The diagnostic of the component missing member comes from the ts service, so the all code fixes for it are delegated to the ts service. The code fixes are placed in the LS package because only LS can benefit from it now, and The LS knows how to provide code fixes by the diagnostic and NgCompiler. The class `CodeFixes` is useful to extend the code fixes if LS needs to provide more code fixes for the template in the future. The ts service uses the same way to provide code fixes. https://github.com/microsoft/TypeScript/blob/162224763681465b417274383317ca9a0a573835/src/services/codeFixProvider.ts#L22 Fixes angular/vscode-ng-language-service#1610

ivanwonder · 2022-07-16T10:04:03Z

Maybe move all the CodeActionMeta into codefixes/src/*.ts is better, now there is only fix_missing_member.ts file. I think there will be more metas in the future.

atscott

Awesome. LGTM

I'm also adding @dylhunn as a reviewer since he's going to be building off of this and will have feedback from more hands-on experience.

dylhunn · 2022-07-20T16:51:24Z

@ivanwonder I'm actually having some trouble with the latest version of this PR, and the corresponding vscode-language-service PR. Although it worked previously, now the extension development host logs this error when I hover over a missing member:

[Error - 9:48:46 AM] Request textDocument/codeAction failed.
  Message: Request textDocument/codeAction failed with message: undefined is not a function
  Code: -32603

packages/language-service/src/template_target.ts

dylhunn

@ivanwonder Looks great to me. After some experimentation, I found this to be a very extensible scaffolding for new quick fixes. Is the PR in the other repo also ready to be reviewed? Thanks!

AndrewKushnir · 2022-08-02T18:58:23Z

This PR was merged into the repository by commit 598b72b.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.1.3/14.2.0) | | [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.1.3/14.2.0) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.1.3/14.2.0) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.1.3/14.2.0) | | [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.1.3/14.2.0) | | [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.1.3/14.2.0) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.1.3/14.2.0) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.1.3/14.2.0) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v14.2.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1420-2022-08-25) [Compare Source](angular/angular@14.1.3...14.2.0) ##### animations | Commit | Type | Description | | -- | -- | -- | | [b96e571897](angular/angular@b96e571) | fix | fix stagger timing not handling params ([#47208](angular/angular#47208)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [b380fdd59e](angular/angular@b380fdd) | feat | add a density cap for image srcsets ([#47082](angular/angular#47082)) | | [7ce497e5bc](angular/angular@7ce497e) | feat | add built-in Imgix loader ([#47082](angular/angular#47082)) | | [bff870db61](angular/angular@bff870d) | feat | add cloudflare loader ([#47082](angular/angular#47082)) | | [86e77a5d55](angular/angular@86e77a5) | feat | add Image directive skeleton ([#45627](angular/angular#45627)) ([#47082](angular/angular#47082)) | | [0566205a02](angular/angular@0566205) | feat | Add image lazy loading and fetchpriority ([#47082](angular/angular#47082)) | | [4e952ba216](angular/angular@4e952ba) | feat | add loaders for cloudinary & imagekit ([#47082](angular/angular#47082)) | | [e854a8cdde](angular/angular@e854a8c) | feat | add loading attr to NgOptimizedImage ([#47082](angular/angular#47082)) | | [8d3701cb4c](angular/angular@8d3701c) | feat | add warnings re: image distortion ([#47082](angular/angular#47082)) | | [d5f7da2120](angular/angular@d5f7da2) | feat | define public API surface for NgOptimizedImage directive ([#47082](angular/angular#47082)) | | [d3c3426aa4](angular/angular@d3c3426) | feat | detect LCP images in `NgOptimizedImage` and assert if `priority` is set ([#47082](angular/angular#47082)) | | [451b85ca17](angular/angular@451b85c) | feat | explain why width/height is required ([#47082](angular/angular#47082)) | | [586274fe65](angular/angular@586274f) | feat | provide an ability to exclude origins from preconnect checks in NgOptimizedImage ([#47082](angular/angular#47082)) | | [57f3386e5b](angular/angular@57f3386) | feat | support custom srcset attributes in NgOptimizedImage ([#47082](angular/angular#47082)) | | [7baf9a46cd](angular/angular@7baf9a4) | feat | verify that priority images have preconnect links ([#47082](angular/angular#47082)) | | [f81765b333](angular/angular@f81765b) | feat | warn if rendered size is much smaller than intrinsic ([#47082](angular/angular#47082)) | | [e2ab99b95e](angular/angular@e2ab99b) | fix | allow null/undefined to be passed to ngClass input ([#39280](angular/angular#39280)) ([#46906](angular/angular#46906)) | | [bedf537951](angular/angular@bedf537) | fix | allow null/undefined to be passed to ngStyle input ([#47069](angular/angular#47069)) | | [f9511bf6e8](angular/angular@f9511bf) | fix | avoid interacting with a destroyed injector ([#47243](angular/angular#47243)) | | [dc29e21b14](angular/angular@dc29e21) | fix | consider density descriptors with multiple digits as valid ([#47230](angular/angular#47230)) | | [801daf82d1](angular/angular@801daf8) | fix | detect `data:` and `blob:` inputs in `NgOptimizedImage` directive ([#47082](angular/angular#47082)) | | [fff8056e7f](angular/angular@fff8056) | fix | fix formatting on oversized image error ([#47188](angular/angular#47188)) ([#47232](angular/angular#47232)) | | [1ca2ce19ab](angular/angular@1ca2ce1) | fix | remove default for image width ([#47082](angular/angular#47082)) | | [c5db867ddc](angular/angular@c5db867) | fix | remove duplicate deepForEach ([#47189](angular/angular#47189)) | | [1cf43deb18](angular/angular@1cf43de) | fix | sanitize `rawSrc` and `rawSrcset` values in NgOptimizedImage directive ([#47082](angular/angular#47082)) | | [d71dfe931f](angular/angular@d71dfe9) | fix | set bound width and height onto host element ([#47082](angular/angular#47082)) | | [32caa8b669](angular/angular@32caa8b) | fix | support density descriptors with 2+ decimals ([#47197](angular/angular#47197)) ([#47232](angular/angular#47232)) | | [ae4405f0bf](angular/angular@ae4405f) | fix | throw if srcset is used with rawSrc ([#47082](angular/angular#47082)) | | [0c8eb8bc82](angular/angular@0c8eb8b) | perf | monitor LCP only for images without `priority` attribute ([#47082](angular/angular#47082)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [ea89677c12](angular/angular@ea89677) | feat | support more recent version of `tsickle` ([#47018](angular/angular#47018)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [d1e83e1b30](angular/angular@d1e83e1) | feat | add `createComponent` function ([#46685](angular/angular#46685)) | | [10becab70e](angular/angular@10becab) | feat | add `reflectComponentType` function ([#46685](angular/angular#46685)) | | [4b377d3a6d](angular/angular@4b377d3) | feat | introduce createApplication API ([#46475](angular/angular#46475)) | | [31429eaccc](angular/angular@31429ea) | feat | support TypeScript 4.8 ([#47038](angular/angular#47038)) | | [796840209c](angular/angular@7968402) | fix | align TestBed interfaces and implementation ([#46635](angular/angular#46635)) | ##### forms | Commit | Type | Description | | -- | -- | -- | | [426af91a42](angular/angular@426af91) | feat | add `FormBuilder.record()` method ([#46485](angular/angular#46485)) | | [b302797de4](angular/angular@b302797) | fix | Correctly infer `FormBuilder` types involving `[value, validators]` shorthand in more cases. ([#47034](angular/angular#47034)) | ##### language-service | Commit | Type | Description | | -- | -- | -- | | [598b72bd05](angular/angular@598b72b) | feat | support fix the component missing member ([#46764](angular/angular#46764)) | ##### platform-browser | Commit | Type | Description | | -- | -- | -- | | [07606e3181](angular/angular@07606e3) | feat | add `isEmpty` method to the `TransferState` class ([#46915](angular/angular#46915)) | ##### platform-server | Commit | Type | Description | | -- | -- | -- | | [2b4d7f6733](angular/angular@2b4d7f6) | feat | support document reference in render functions ([#47032](angular/angular#47032)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [0abb67af59](angular/angular@0abb67a) | feat | allow guards and resolvers to be plain functions ([#46684](angular/angular#46684)) | | [75df404467](angular/angular@75df404) | feat | Create APIs for using Router without RouterModule ([#47010](angular/angular#47010)) | | [10289f1f6e](angular/angular@10289f1) | feat | expose resolved route title ([#46826](angular/angular#46826)) | | [8600732b09](angular/angular@8600732) | feat | Expose the default matcher for `Routes` used by the `Router` ([#46913](angular/angular#46913)) | | [422323cee0](angular/angular@422323c) | feat | improve typings for RouterLink boolean inputs ([#47101](angular/angular#47101)) | | [26ea97688c](angular/angular@26ea976) | feat | Make router directives standalone ([#46758](angular/angular#46758)) | | [2a43beec15](angular/angular@2a43bee) | fix | Fix route recognition behavior with some versions of rxjs ([#47098](angular/angular#47098)) | ##### service-worker | Commit | Type | Description | | -- | -- | -- | | [383090858c](angular/angular@3830908) | feat | support `sendRequest` as a `notificationclick` action ([#46912](angular/angular#46912)) | | [3f548610dd](angular/angular@3f54861) | fix | export NoNewVersionDetectedEvent ([#47044](angular/angular#47044)) | | [482b6119c2](angular/angular@482b611) | fix | update golden `index.md` ([#47044](angular/angular#47044)) | #### Special Thanks Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Dylan Hunn, Emmanuel Roux, FatalMerlin, George Kalpakas, Ilia Mirkin, Jan Kuehle, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Kalbarczyk, Kara Erickson, Katie Hempenius, Kristiyan Kostadinov, Merlin, Paul Gschwendtner, Pawel Kozlowski, Tristan Sprößer, Victor Porof, angular-robot\[bot], dario-piotrowicz, ivanwonder and vyom  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1523 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2022-09-03T16:06:04Z

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.}

ivanwonder force-pushed the support-codefixes branch 2 times, most recently from 043ea8b to e7f1b32 Compare July 9, 2022 14:27

ivanwonder marked this pull request as ready for review July 9, 2022 14:56

pullapprove bot requested review from alxhub and JoostK July 9, 2022 14:56

ivanwonder mentioned this pull request Jul 9, 2022

Create missing component members from within template angular/vscode-ng-language-service#1610

Closed

2 tasks

jessicajaniuk added the area: language-service Issues related to Angular's VS Code language service label Jul 11, 2022

ngbot bot added this to the Backlog milestone Jul 11, 2022

jessicajaniuk added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release labels Jul 11, 2022

jessicajaniuk requested a review from atscott July 11, 2022 18:03

atscott added target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Jul 12, 2022

atscott requested changes Jul 12, 2022

View reviewed changes

dylhunn mentioned this pull request Jul 13, 2022

Automatic NgModule Imports angular/vscode-ng-language-service#1501

Closed

2 tasks

ivanwonder force-pushed the support-codefixes branch 5 times, most recently from bc66960 to de150d7 Compare July 16, 2022 04:29

ivanwonder requested a review from atscott July 16, 2022 04:50

ivanwonder force-pushed the support-codefixes branch from 57d6a93 to f4a220a Compare July 16, 2022 06:32

ivanwonder force-pushed the support-codefixes branch from f4a220a to 0c4e585 Compare July 16, 2022 09:50

atscott approved these changes Jul 18, 2022

View reviewed changes

atscott requested a review from dylhunn July 18, 2022 21:47

fixup! feat(language-service): support fix the component missing member

04c55d1

ivanwonder commented Jul 20, 2022

View reviewed changes

packages/language-service/src/template_target.ts Show resolved Hide resolved

dylhunn approved these changes Aug 2, 2022

View reviewed changes

dylhunn added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Aug 2, 2022

dylhunn removed request for JoostK and alxhub August 2, 2022 17:56

AndrewKushnir closed this in 598b72b Aug 2, 2022

ivanwonder deleted the support-codefixes branch August 3, 2022 13:28

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(language-service): support fix the component missing member #46764

feat(language-service): support fix the component missing member #46764

ivanwonder commented Jul 9, 2022 •

edited

atscott left a comment

ivanwonder commented Jul 16, 2022

ivanwonder commented Jul 16, 2022

atscott left a comment

dylhunn commented Jul 20, 2022 •

edited

dylhunn left a comment •

edited

AndrewKushnir commented Aug 2, 2022

angular-automatic-lock-bot bot commented Sep 3, 2022

feat(language-service): support fix the component missing member #46764

feat(language-service): support fix the component missing member #46764

Conversation

ivanwonder commented Jul 9, 2022 • edited

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

atscott left a comment

Choose a reason for hiding this comment

ivanwonder commented Jul 16, 2022

ivanwonder commented Jul 16, 2022

atscott left a comment

Choose a reason for hiding this comment

dylhunn commented Jul 20, 2022 • edited

dylhunn left a comment • edited

Choose a reason for hiding this comment

AndrewKushnir commented Aug 2, 2022

angular-automatic-lock-bot bot commented Sep 3, 2022

ivanwonder commented Jul 9, 2022 •

edited

dylhunn commented Jul 20, 2022 •

edited

dylhunn left a comment •

edited