{"id":230251,"date":"2020-08-05T13:40:51","date_gmt":"2020-08-05T20:40:51","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=230251"},"modified":"2020-08-06T11:01:18","modified_gmt":"2020-08-06T18:01:18","slug":"angular-language-service-for-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/angular-language-service-for-visual-studio\/","title":{"rendered":"Angular Language Service for Visual Studio\u00a0  \u00a0"},"content":{"rendered":"<p><span style=\"font-size: 1rem;\">Great news everyone: The Angular Language Service is coming to Visual Studio!<\/span><\/p>\n<div class=\"mume markdown-preview \">\n<p>For those who don&#8217;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.<\/p>\n<p>And today, we&#8217;re excited to bring it to Visual Studio.<\/p>\n<p>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 <a href=\"https:\/\/dotnet.microsoft.com\/apps\/aspnet\">ASP.NET<\/a>\/<a href=\"https:\/\/dotnet.microsoft.com\/learn\/aspnet\/what-is-aspnet-core\">ASP.NET Core<\/a> 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&#8217;t much support for Angular.<\/p>\n<p>That is why we decided to bring the <a href=\"https:\/\/angular.io\/guide\/language-service\">Angular Language Service<\/a> 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.<\/p>\n<p><em>Please note you will need to have a minimum version of 16.5.0 of Visual Studio to use this extension<\/em><\/p>\n<h2 id=\"usage\" class=\"mume-header\">Usage<\/h2>\n<h3 id=\"1-download-the-extension-from-the-visual-studio\" class=\"mume-header\">1. Download the Extension from the Visual Studio<\/h3>\n<p><strong>Via The Visual Studio Marketplace<\/strong><\/p>\n<p>You can find the extension <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TypeScriptTeam.AngularLanguageService\">here<\/a>.<\/p>\n<p>Select the <strong>Download<\/strong> button and then open up the .vsix file to get the extension into Visual Studio<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/GOEfInX.png\" alt=\"Download button\" \/><\/p>\n<p><strong>Via Visual Studio<\/strong><\/p>\n<p>In the top menu bar of Visual Studio, hover over the Extensions menu and the select <strong>Manage Extensions<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/Vna5tBF.png\" alt=\"Manage Extensions\" \/><\/p>\n<p>In the search bar, search for <strong>Angular Language Extension<\/strong> and then select the extension and press <strong>Download<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/NviUfk7.png\" alt=\"Select Extension\" \/><\/p>\n<h3 id=\"2-opening-an-angular-project\" class=\"mume-header\">2. Opening an Angular Project<\/h3>\n<p>Once you have the extension downloaded, open an Angular project in Visual Studio.<\/p>\n<p>If you don&#8217;t have one already created here are some options in creating them:<\/p>\n<ul>\n<li><a href=\"https:\/\/angular.io\/guide\/visual-studio-2015\">ASP.NET + Angular Project<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/client-side\/spa\/angular?view=aspnetcore-3.1&amp;tabs=visual-studio\">ASP.NET Core + Angular Project<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/develop-javascript-code-without-solutions-projects?view=vs-2019\">Standalone Angular Project Open Folder Option<\/a><\/li>\n<li><a href=\"http:\/\/www.codefoster.com\/existingnode\/\">Standalone Angular Project Node.js Solution Option<\/a><\/li>\n<\/ul>\n<p><em>Please note for both Standalone options you will need to create an angular project via command line first. You can find that tutorial <a href=\"https:\/\/angular.io\/guide\/setup-local\">here<\/a><\/em><\/p>\n<h3 id=\"3-getting-the-extension-working\" class=\"mume-header\">3. Getting the Extension Working<\/h3>\n<p>Once you have your Angular project open, be sure to <strong>Build<\/strong> the solution !<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/eMRhOMO.png\" alt=\"Build Solution\" \/><\/p>\n<p>Open up a .ts or html file in the Angular Project.<\/p>\n<p>You will know that the Extension is working by viewing your Output Window. There should be two additional options in the drop down window:<\/p>\n<ul>\n<li>Angular Language Service: This is the output of the extension when it is active and working within a file.<\/li>\n<li>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.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/uzpxja.sn.files.1drv.com\/y4m3m3SBmJRyfKCfXs_KhtEHNFw7eXHwFBMbqVDfTmL6ZbHREv_brszarakz90TN7ilTgh4wmV-rxW_5uZ9fkwOdo1ISMm-oEzENEnx-SSMhE6ehQZnDqDvB8hVkjZfLCBH6dx4HqPaEqLVj1GJCsmdFY2YCbWKv80ON5qKYTB9D3GDmdqXFddN3sKlcC1F5oF-lbE5pnDWWA-Lqe0oD7ZZ7w?width=512&amp;height=164&amp;cropmode=none\" alt=\"Output Window\" \/><\/p>\n<p>Try testing out the autocompletion and hover over Angular elements to try it out! \ud83d\ude03<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/Xxob53hbQT0MPaeDqF\/giphy.gif\" alt=\"ALS\" \/><\/p>\n<h2 id=\"let-us-know-what-you-think\" class=\"mume-header\">Let Us Know What You Think<\/h2>\n<p>Our team would love to hear your thoughts on the new extension! Please feel free to leave feedback and\/or bugs you found <a href=\"https:\/\/github.com\/microsoft\/vs-ng-language-service\/issues\">here<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Great news everyone: The Angular Language Service is coming to Visual Studio! For those who don&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":36368,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[],"class_list":["post-230251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio"],"acf":[],"blog_post_summary":"<p>Great news everyone: The Angular Language Service is coming to Visual Studio! For those who don&#8217;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 [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/230251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/36368"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=230251"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/230251\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=230251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=230251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=230251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}