Installing Bootstrap 4 with VS 2017 and Angular 4

Question

I'm working on my first side project attempting to use the following tools:

• .Net Core 2 MVC
• Angular 4
• Bootstrap 4
• Visual Studio 2017

I followed this tutorial with no issue to get the Angular app running: http://www.talkingdotnet.com/how-to-create-an-angular-4-app-with-visual-studio-2017/

I'm very unfamiliar with Angular4, webpack, etc. in general. I've worked on many knockout, Angular 1, and Angular 2 projects, but I've never set up the Angular 2+ projects myself.

What I can't figure out is how to install bootstrap 4 using npm. Running npm install on the latest bootstrap libraries went fine, but I don't know how to inject the CSS and js into the application. Most of the guides on getting started with bootstrap 4 use files that aren't generated in the above tutorial (e.g. styles.css from this: http://technobytz.com/install-bootstrap-4-using-npm.html).

Here is the current view of the project from visual studio:

Any thoughts? Thanks in advance.

Answer 1

I've been having the same issue and found this answer by @james-law to a similar question solved the problem.

1. Open your Angular SPA solution in Visual Studio
2. Open package.json and update the bootstrap entry to "bootstrap": "4.0.0", or whichever version you require
3. Close the solution in Visual Studio
4. Open the project folder and delete the node_modules folder
5. Open up a command prompt for the project folder
6. Run npm install popper.js --save in command prompt
7. Run npm install in command prompt
8. Run webpack --config webpack.config.vendor.js in command prompt
9. Open the solution in Visual Studio
10. Build the solution, after which you should be fully upgraded

Although the answer worked great I didn't want to install webpack globally so I skipped step 8 and instead deleted the dist folder inside wwwroot before step 10.