2

I am working on an Angular Project in Visual Studio 2019 I've opened as a folder. Everything is working very nicely. Intellisense for TypeScript/JavaScript classes and Angular. And when you roll over a method you get the description and return value and so forth. Is there a way to get the intellisense working for BootStrap and Font Awsome? I know in a .Net Cor project you have to do something with a _view[something] file. Can't remember. I've been out on disablitily for a year and just starting to get back to studying. Figured I'd use the time to finally just sit down here and learn Angular once and for all.

Sam
  • 4,766
  • 11
  • 50
  • 76
  • Please try to add the ` ` in the csproj file to see whether it works.The premise is that you have already installed bootstrap and Font Awsome through nuget. – Pod Mo Nov 21 '19 at 13:20
  • Sorry this is not a CSharp or ASP.Net Core web application. This is just an angular application created with the Angular cli ng new command. – Sam Nov 21 '19 at 17:05
  • Where in an Angular app can you do this? Which config file? Is there like an application.json this can be done in? – Sam Nov 21 '19 at 17:07

3 Answers3

4

I had the same problem, and I noticed that styles.css also wasn't included in Intellisense.

Instead of working in a folder, I had to:

  1. Create a new blank solution (Create a new project > Search for "Blank Solution")
  2. Right click the solution and click "Add > Existing Web Site...".
  3. Browse to the folder containing the Angular folder and click "Open"

IntelliSense builds straight away in the component HTML now.

IntelliSense from Bootstrap classes

I have read that including node_modules in the project makes searching really slow, but if I exclude node_modules by making it a hidden folder, IntelliSense stops working for bootstrap CSS files again. Styles.css continues to show up, though.

Oh, also I updated Visual Studio to 16.4.5.

David Brunning
  • 575
  • 7
  • 18
  • One other thing I noticed. I use Resharper, and that gets in the way. I had to disable Resharper intellisense for html files. – David Brunning Apr 14 '20 at 11:47
  • Creating a sln and adding the Angular Folder as a WebSite got hte bootstrap working for me. Thank you! I just didn't want to do this for every Angular project I create while following along with this book. Any real projects would be based on an ASP.Net Core and Angular project type so it would be all wired up anyway. But thank you again. – Sam Jun 29 '21 at 14:01
2

If you include just the bootstrap folder which is located in “\ClientApp\node_modules” folder, bootstrap’s IntelliSense works fine in your ( *.html and *.css ) files in your visual studio 2019 .Net Core with an angular project. In order to do that :

  1. click “Show All Files” in Solution Explorer Here
  2. Right now, you can see the node_modules folder with a light gray color.
  3. Open that folder and right-click on bootstrap folder and click on Include In Project
  4. Then close and open your project again with visual studio here

It works for me in Visual Studio 2019, .NET Core5, Angular 11.

Mahdi Abyaznezhad
  • 462
  • 3
  • 13
  • I did the first 3 steps and expected the intellisense showing up. Actually the key step is to "close and open" or "unload or reload" project. Ta-da!! – CincyBella Oct 08 '21 at 03:15
1

For me, l install the latest npm version and create a angular project by ng new xxx(project name) and then install bootstap(cd your project folder and then use command npm install bootstrap) and font-awesome(npm install awesome) into my project.

Besides, open the bootstrap and font-awesome as folder in VS2019(community version16.3.7) and Intelliense works well as the below pictues shows:

Bootstrap

enter image description here

enter image description here

Font-awesome

enter image description here

enter image description here

So l guess the issue is more related to your VS settings,environment or the steps you take to create the angular project.

Suggestions

Note: Please check whether you have installed the workload Node.js development and ASP.NET and web development.

1.reset your VS settings(Tools-->Import and Export Settings...-->Reset all settings) to make sure the Settings do not interfere with the use of intellisense.

2.start VS2019 with devenv /safemode in case they interfere with intellisense.

3.create a angular core web application in VS2019 to check whether intelliense works well. If it works well, maybe the issue is something wrong from your initial angular project. And it not, maybe Intelliense components are broken.

>>Try to do a repair in VS Installer

In addition, if neither NPM nor VS2019 is the latest version， please update it.

LoLance
  • 25,666
  • 1
  • 39
  • 73
  • I like the idea of going back and making sure Node.js workload is installed. – Sam Nov 22 '19 at 15:33
  • Thanks for your feedback. Try to create an new Angular project with ng CLI to see whether it can work. Also, l want to know what is the version of Node.js in your PC. Just for me, use the latest version **v13.2.0** to create an Angular project then open with VS2019 and the Intelliense works without any errors. If you have tried my suggestions without any errors, please share the information for us. With it, we can test it in my machine and will update the answer for you. – LoLance Nov 25 '19 at 03:08
  • Oh I'm on 8.11.3. I have to follow what the author of a book I'm reading uses for now to make sure all the examples work. It will probably work when I get into actual Visual Studio Asp.Net Core /Angular projects. – Sam Nov 25 '19 at 14:42
  • l use the version 8.11.3 and test it in my side and everything is ok. Also, since there were no problems with the Angular project you created with VS, I guess that there were some problems with your initial project which is created by Angular CLI(could be the steps you tried to create the project). So try to recreate a new Angular project with the newest Node.js(the higher version will be compatible with the lower version) to check if this works. Refer to [this](https://www.geeksforgeeks.org/angular-cli-angular-project-setup/). Hope it could help you. – LoLance Nov 26 '19 at 05:03
  • Hi Lance, how did you link bootstrap to the Angular project once you installed it? Did you include it in the styles section of angular.json, or did you link to it in the index.html? I used the installation described here https://www.smashingmagazine.com/2019/02/angular-application-bootstrap/ and have the same problem with intellisense. – David Brunning Feb 28 '20 at 16:58