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.
Try testing out the autocompletion and hover over Angular elements to try it out! 😃
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
Does the drilldown from an html template back to a component actually work?
throws an error every time when open any html file
Hey Evgeny
Would you mind contacting me at gacreve@microsoft.com, so I can get more detail on the issue and see how my team and I can fix it?
Excellent! Can we have the same for Vue please?
Nice to know that some sort of support comes into Visual Studio 2019 for the Angular, but as a Full Stack Developer, I love the C# development in Visual Studio, but for the Front-end (Angular & React), I love all the features Visual Studio Code offers me, which is at least a light year ahead of Visual Studio 2019.
Terminal, intellisense, themes, extensions (just to mention few) much much better in Visual Studio Code than Visual Studio 2019.
I will say instead putting the effort to bring Angular into Visual Studio, please stay focussed on the Visual Code and do all...