Vscode-ng-language-service: Go to definition of an angular component's templateUrl or styleUrl

[mjbvz]

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

• 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]

_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]

_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 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]

Is there any progress on this feature request?

[mkoczka]

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

[vitoexe]

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

[raulamoretti]

Up! We need this!

[rexebin]

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.

[anton-po-github]

Thx "rexebin", it helped me !

[kylebake]

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]

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]

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

[kyliau]

@ayazhafiz is there any work left? If not, could you please close this? Thank you!

[angular-automatic-lock-bot[bot]]

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