#Angular and Asp.Net Core 3: #Bootstrap integration plus #Intellisence

When we build a new Angular application in Visual Studio 2019 we use lots of npm commands to get the resources needed. However because the node_modules folder is not included in the solution, Visual Studio will not pick up the bootstrap CSS for intellisence.

2019-11-09 16_25_42-Window.png

There is a simple fix, but let’s first review how to add Bootstrap to an Angular project in Asp.Net Core 3.

Open a terminal window and point to the ClientApp folder then type:

npm install –save bootstrap

In the node_modules folder you’ll see a new folder called bootstrap:

2019-11-09 16_28_11-Window.png

Open the angular.json and add a reference to the minified bootstrap css:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

 

Select the dist folder in the node_modules/bootstrap folder and press ctrl+c to copy it.

Create a new folder called “MyIntellisence”  in the root of the solution then paste in the contents of the dist folder:

2019-11-09 16_29_50-Window.png

That’s it! Now when you open a component, Visual Studio will give you gorgeous intellisence:

2019-11-09 16_31_27-Window.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s