Ready to shape the next generation of technology? Discover how the Visual Studio family, Azure, GitHub, and GitHub Copilot empower you to innovate and lead.

August 5th, 2020

Angular Language Service for Visual Studio

Gabrielle Crevecoeur

Program Manager

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

Author

Gabrielle Crevecoeur

Program Manager

Gabrielle is a Program Manager on the JavaScript/TypeScript tooling team! Her goal is to get you the best JavaScript/TypeScript tooling in Visual Studio, VS Code and VS for Mac

18 comments

Discussion is closed. Login to edit/delete existing comments.

Sort by :

Newest

Newest Popular Oldest

mark goldin September 24, 2020 0

Does the drilldown from an html template back to a component actually work?
Evgeny Pinchuk August 25, 2020 0

throws an error every time when open any html file
- Gabrielle Crevecoeur Author August 25, 2020 0
  
  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?
Russ Painter August 24, 2020 0

Excellent! Can we have the same for Vue please?
Princely Pakkiyam August 24, 2020 0

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...
Read more
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 the features, fixes there to the Front-end in that way, we Full Stack Developers can stay focussed on all the server side programming on Visual Studio 2019 and all the front end on Visual Code.

Best regards…
Ciao…

Read less
Siôn J. Lewis August 23, 2020 0

👍
Tseng SR August 20, 2020 0

Awesome! Been waiting 4 years for this.

The previous Visual Studio Extension on GitHub only worked with inline templates, but didn’t with separate template files. Suggest was to rename them to ngml but this broke stuff because it was not handling HTML + Angular but some kind of YAML based HTML which was really useless.

From what I see it works great, greatly appreciated

Manuel Hernandez August 9, 2020

I don't get the autocomplete (IntelliSense) on the HTML file as I do on VSCode. For example, like when simply typing {{ customer.firstName }}, it won't even detect the "customer" public variable on the .ts file. Also, I now get a weird error when typing "class" on an HTML element.

The error reads:

<code>

I have Visual Studio 2019 Version 16.7.0.

What am I missing? :(

I don’t get the autocomplete (IntelliSense) on the HTML file as I do on VSCode. For example, like when simply typing {{ customer.firstName }}, it won’t even detect the “customer” public variable on the .ts file. Also, I now get a weird error when typing “class” on an HTML element.

The error reads:

System.NullReferenceException: Object reference not set to an instance of an object.at Microsoft.WebTools.Languages.Html.Editor.Completion.HtmlCompletionController.IsCommitChar(Char typedChar)at Microsoft.WebTools.Languages.Shared.Editor.Completion.CompletionController.OnPreTypeChar(Char typedCharacter)at Microsoft.WebTools.Languages.Shared.Editor.Completion.TypingCommandHandler.HandleCompletion(EditorCommandArgs args, Boolean& callOnPostTypeChar)at Microsoft.WebTools.Languages.Shared.Editor.Completion.TypingCommandHandler.ExecuteCommand(TypeCharCommandArgs args, Action nextCommandHandler, CommandExecutionContext executionContext)at Microsoft.VisualStudio.UI.Text.Commanding.Implementation.EditorCommandHandlerService.c__DisplayClass14_1`1.b__0()at Microsoft.VisualStudio.Text.Utilities.GuardedOperations.CallExtensionPoint(Object errorSource, Action call, Predicate`1 exceptionFilter) --- End of stack trace from previous location where exception was thrown --- at Microsoft.VisualStudio.Telemetry.WindowsErrorReporting.WatsonReport.GetClrWatsonExceptionInfo(Exception exceptionObject)

I have Visual Studio 2019 Version 16.7.0.

What am I missing? 🙁

Gabrielle Crevecoeur Author August 25, 2020 0

Hey Manuel,

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?

César Demicheli August 9, 2020 0

Tried this extension, it’s still too green to justify the switch to VS.
Many nullables don’t detect the properties inside them during a call, so it basically breaks intellisense and renders it useless.
Wonder why releasing something still unfinished.
Will try it again when it’s more mature. In the meantime, VSCode leads the way…
Mike M August 7, 2020 0

Being staunch user of Visual Studio (not VS Code) Angular Language Service for Visual Studio is most welcomed enhancement in what is ultimate developer's toolbox.

Other front-end colleagues over the years insisted to switch to VS Code... however, I pointed to them that is not VS Code in its self, but the extension that exists which Visual Studio lacked, until now that drives the Angular experience.

Thank you for continue to make Visual Studio one stop for...
Read more
Being staunch user of Visual Studio (not VS Code) Angular Language Service for Visual Studio is most welcomed enhancement in what is ultimate developer’s toolbox.

Other front-end colleagues over the years insisted to switch to VS Code… however, I pointed to them that is not VS Code in its self, but the extension that exists which Visual Studio lacked, until now that drives the Angular experience.

Thank you for continue to make Visual Studio one stop for all development needs. “I” in IDE, stands for integrated.

Read less
MgSam August 6, 2020 0

Microsoft's IDE strategy for web development is confusing. Visual Studio has always lagged behind with web development features; for several years Mads Kristensen was making up for this with Web Essentials which helped make VS at least tolerable; that is until VS Code came out...

Every sane web developer I know has moved all front-end web development into VS Code. It's much nicer to work with with than VS, primarily because of performance, but also...
Read more
Microsoft’s IDE strategy for web development is confusing. Visual Studio has always lagged behind with web development features; for several years Mads Kristensen was making up for this with Web Essentials which helped make VS at least tolerable; that is until VS Code came out…

Every sane web developer I know has moved all front-end web development into VS Code. It’s much nicer to work with with than VS, primarily because of performance, but also because its extension ecosystem around web tools (including Angular) is much richer. It’s also the primary tool that the TypeScript team literally designs the language around (quick-fixes, etc). And if you’re writing Angular you’re using TypeScript.

The point being- why do this work to port to Visual Studio at all? Why not just point web developers at VS Code with its excellent existing Angular tools. VS has been and will continue to be a laggard behind VS Code in web development, and I’d strongly suggest to anyone doing Angular dev in VS to give VS Code a try.

Most people writing ASP.NET will still need VS for the .NET side of things…

Read less
- Christopher Dengler September 9, 2020 0
  
  I think there are as many dev tools, styles, IDEs, and methodologies as there are opinions. And this is coming from a former Microsoft employee of several decades. There are some that swear by Angular, React, etc. And then there are others like me that would love to give these "Just Another Dom Walker" technologies a public spanking in the supermarket. Now before I get 50 people screaming in all caps...
  Read more
  I think there are as many dev tools, styles, IDEs, and methodologies as there are opinions. And this is coming from a former Microsoft employee of several decades. There are some that swear by Angular, React, etc. And then there are others like me that would love to give these “Just Another Dom Walker” technologies a public spanking in the supermarket. Now before I get 50 people screaming in all caps trying to convince me that Angular, React, etc., ARE INDEED the “best technologies”, I’m going to tell you this – the best technologies CHANGE per what the job/project requires.. in other words, the best tools for the job.
  
  But having been a professional developer working at Microsoft in Redmond (using Visual Studio since 1996 when Microsoft was trying to push Visual InterDev over using FrontPage ’95) — yes, I’m THAT old — I can tell you that “this too shall pass”. Don’t get me wrong – people will continue to use these technologies, just like other stuff that never seems to die out, and that’s all part of the evolution of code. Great. Nothin’ wrong with that. However, I firmly do not believe that (A) Visual Studio has always lagged behind with web development features, and (B) that “every sane web developer I know has moved all front-end web development into VS Code”. That’s an absolute, and that’s absolutely not true 🙂 In fact, you (MgSam) mentioned, “The point being- why do this work to port to Visual Studio at all? Why not just point web developers at VS Code with its excellent existing Angular tools.” I’ll take you one step further – why “port” ANY of it? Let 3rd parties push their flavor of the year “latest & greatest” as plug-ins for these world class IDEs and environments, and stop chasing the dragon here. Let Microsoft do what it does best, and let 3rd parties compete for your attention to the “flavor of the year” frameworks, styles, patterns, or [fill in the next marketing term here].
  
  I’m being sort of tongue in cheek here, but I will guarantee you just one thing – that “one thing” (whatever tech it is – language, pattern, etc.) that you think is going to be around for a long time? It won’t be. I think Microsoft is doing a great job in keeping up in a business that changes more than any business ever has on our planet in our lifetime. Just my $0.02.
  
  Read less
- Jim Barrett August 24, 2020 0
  
  Sorry MgSam. VS Code is nowhere near as good an editor as the "real" Visual Studio. Once the real Visual Studio catches up on client-side dev, where it has made good progress, it won't even be close. Extensions, cross-platform, blah, blah, blah.
  
  "Why not just point web developers at VS Code with its excellent existing Angular tools."
  
  I have been fighting that very statement since the beginning of VS Code.
  
  Of course this is all opinion based but...
  Read more
  Sorry MgSam. VS Code is nowhere near as good an editor as the “real” Visual Studio. Once the real Visual Studio catches up on client-side dev, where it has made good progress, it won’t even be close. Extensions, cross-platform, blah, blah, blah.
  
  “Why not just point web developers at VS Code with its excellent existing Angular tools.”
  
  I have been fighting that very statement since the beginning of VS Code.
  
  Of course this is all opinion based but I want Microsoft to know that committing resources to Visual Studio client-side dev is definitely worth it and appreciated. Thanks Gabrielle Crevecoeur for furthering the effort to improve client-side development in the real Visual Studio.
  
  Read less
- Mariusz August 7, 2020 0
  
  For frontend only developers it’s probably not a big deal. For full stacks that spend similar time in backend .NET code and frontend angular code it will be nice to work with only one IDE (yeah I know some people say VS Code is not IDE, whatever).
  - Chris Beach August 10, 2020 0
    
    Yep, this is it exactly, I’m coding all parts of the app, the Angular UI, the .NET ASP mid and the SQL Server backend. And although I have Code and SSMS installed, for general day-to-day you can sit in Visual Studio and do it all. So I’m really glad that MS are making sure the premium IDE works at its fullest.
    
    Now to get that terminal from Code into Studio 😀