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
Via Visual Studio
In the top menu bar of Visual Studio, hover over the Extensions menu and the select Manage Extensions
In the search bar, search for Angular Language Extension and then select the extension and press Download
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:
- ASP.NET + Angular Project
- ASP.NET Core + Angular Project
- Standalone Angular Project Open Folder Option
- Standalone Angular Project Node.js Solution Option
_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 !
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.
#visual studio #angular