Angular Language Service for Visual Studio   

Gabrielle

Great news everyone: The Angular Language Service is coming to Visual Studio!

For those who don’t know, the Angular team has done a lot of great work on powering up the editing experience for Angular using something called the Angular Language Service. It lays the foundation to provide things like auto-completion, rename, and more across editors.

And today, we’re excited to bring it to Visual Studio.

For some background, our team went through a series of customer calls to understand their workflows and pain-points. After talking with lots of these customers, we noticed a high number of ASP.NET/ASP.NET Core users were building their front-end in Angular. Unfortunately, outside of standard Visual Studio editor features (such as code completions, IntelliSense, Go to Definition and etc), there isn’t much support for Angular.

That is why we decided to bring the Angular Language Service for a better customer experience. The extension will bring in Angular code completions, Angular Diagnostic messages and Quick Info. Go to Definition will be coming soon.

Please note you will need to have a minimum version of 16.5.0 of Visual Studio to use this extension

Usage

1. Download the Extension from the Visual Studio

Via The Visual Studio Marketplace

You can find the extension here.

Select the Download button and then open up the .vsix file to get the extension into Visual Studio

Download button

Via Visual Studio

In the top menu bar of Visual Studio, hover over the Extensions menu and the select Manage Extensions

Manage Extensions

In the search bar, search for Angular Language Extension and then select the extension and press Download

Select Extension

2. Opening an Angular Project

Once you have the extension downloaded, open an Angular project in Visual Studio.

If you don’t have one already created here are some options in creating them:

Please note for both Standalone options you will need to create an angular project via command line first. You can find that tutorial here

3. Getting the Extension Working

Once you have your Angular project open, be sure to Build the solution !

Build Solution

Open up a .ts or html file in the Angular Project.

You will know that the Extension is working by viewing your Output Window. There should be two additional options in the drop down window:

  • Angular Language Service: This is the output of the extension when it is active and working within a file.
  • Angular Language Service Extension: This is the output from Visual Studio when it is loading up the extension. You will not see much output from this option once the extension is up and running.

Output Window

Try testing out the autocompletion and hover over Angular elements to try it out! 😃

ALS

Let Us Know What You Think

Our team would love to hear your thoughts on the new extension! Please feel free to leave feedback and/or bugs you found here

18 comments

Comments are closed. Login to edit/delete your existing comments

  • mark goldin

    Does the drilldown from an html template back to a component actually work?