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

Go to definition of an angular component's templateUrl or styleUrl #111

Open
mjbvz opened this issue Jun 19, 2017 · 12 comments

Comments

@mjbvz
Copy link

commented Jun 19, 2017

From @xWiiLLz on June 17, 2017 16:31

Hi, I'm not sure if this would be a feature request or just an issue in general. I've been using Webstorm for developing angular projects with typescript and I wanted to make the change to VS Code. There is one key feature that doesn't seem to be working or to be there at all in VS Code, which is the easy go-to-definition of a template file (html) or style file (css). When I'm editing a component in Webstorm, I can Ctrl + Click on the templateUrl's relative path and it opens the file right away.

In VS Code, the go-to-definition on a templateUrl gives me a "No definition found for 'component'". Is it a feature lacking, or just a bug?

Thank you.
vscodegotodefinition

  • VSCode Version: Code 1.13.1 (379d2efb5539b09112c793d3d9a413017d736f89, 2017-06-14T18:21:47.485Z)
  • OS Version: Windows_NT ia32 10.0.14393
  • Extensions:
Extension Author Version
vscode-angular2-files alexiv 1.3.8
vscode-eslint dbaeumer 1.2.11
python donjayamanne 0.6.5
tslint eg2 0.15.0
beautify HookyQR 1.1.1
debugger-for-chrome msjsdiag 3.1.4
language-vscode-javascript-angular2 nwallace 0.0.11
autoimport steoates 1.2.2

Steps to Reproduce:

  1. Creating a new empty angular project with the CLI
  2. Opening any component's Typescript file
  3. Selecting the template or style Url and pressing F12 (or right-clicking 'Go to Definition')

Copied from original issue: microsoft/vscode#28937

@mjbvz

This comment has been minimized.

Copy link
Author

commented Jun 19, 2017

From @Deilan on June 18, 2017 13:42

This is a very highly request feature in Angular development indeed.

It would be great to also have an option to quickly find and open files with Angular directives/components declarations by pressing F12 while cursor staying at Angular component in html code.

@mjbvz

This comment has been minimized.

Copy link
Author

commented Jun 19, 2017

From @ramya-rao-a on June 19, 2017 1:31

Am not sure if this should come from the angular related extensions. cc @mjbvz

@mkoczka

This comment has been minimized.

Copy link

commented Nov 20, 2017

This is the last feature I need so I can switch to vscode. Thinking about opening the PR in the near feature, when I will have time.

@zerefel

This comment has been minimized.

Copy link

commented Feb 15, 2018

Is there any progress on this feature request?

@mkoczka

This comment has been minimized.

Copy link

commented Feb 16, 2018

angular2-switcher extension partially resolved this issue for me. Still, it would be very useful to have this implemented.

@vitoexe

This comment has been minimized.

Copy link

commented Feb 21, 2018

@mkoczka how you resolved this issue in angular2-switcher?

@raulamoretti

This comment has been minimized.

Copy link

commented Mar 22, 2018

Up! We need this!

@rexebin

This comment has been minimized.

Copy link

commented Apr 15, 2018

angular2-switcher works very well with Shortcuts, very flexible and it adds Go to Definition function for html template file.

To compensate the lack of F12 opening file, I have made a very simple extension extending the Typescript Definition Provider to allow 'F12' or 'Go to Definition' opening template and style files: F12: Open File.

The extension can open any file with relative path living in .ts file as a string.

Feedback welcomed.

@myWorkingGithub

This comment has been minimized.

Copy link

commented May 22, 2018

Thx "rexebin", it helped me !

@Tryforce

This comment has been minimized.

Copy link

commented Jun 14, 2018

I've been using Angular Follow Selector to get this behavior. I got used to it using IntelliJ and this extension offers very similar actions.

@maartentibau

This comment has been minimized.

Copy link

commented Jun 17, 2018

For me this is one of the main reasons why I'm not switching from WebStorm to VSCode, just the lack of this kind of functionality right out of the box, but it's nice to see VSCode is really improving on that part

@ebakke

This comment has been minimized.

Copy link

commented Oct 25, 2018

@Tryforce thanks for the suggestion. I too enjoy this feature of IntelliJ.

ayazhafiz added a commit to angular/angular that referenced this issue Aug 20, 2019
feat(language-service): add definitions for templateUrl
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111
ayazhafiz added a commit to ayazhafiz/angular that referenced this issue Aug 22, 2019
feat(language-service): add definitions for templateUrl
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111
ayazhafiz added a commit to ayazhafiz/angular that referenced this issue Aug 22, 2019
feat(language-service): add definitions for templateUrl
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111
ayazhafiz added a commit to ayazhafiz/angular that referenced this issue Aug 26, 2019
feat(language-service): add definitions for templateUrl
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111
mhevery added a commit to angular/angular that referenced this issue Aug 29, 2019
feat(language-service): add definitions for templateUrl (#32238)
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111

PR Close #32238
sabeersulaiman added a commit to sabeersulaiman/angular that referenced this issue Sep 6, 2019
feat(language-service): add definitions for templateUrl (angular#32238)
Adds support for `getDefinitionAt` when called on a templateUrl
property assignment.

The currrent architecture for getting definitions is designed to be
called on templates, so we have to introduce a new
`getTsDefinitionAndBoundSpan` method to get Angular-specific definitions
in TypeScript files and pass a `readTemplate` closure that will read the
contents of a template using `TypeScriptServiceHost#getTemplates`. We
can probably go in and make this nicer in a future PR, though I'm not
sure what the best architecture should be yet.

Part of angular/vscode-ng-language-service#111

PR Close angular#32238
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.