Bootstrap 4 on Single Page Application Angular + .Net Core

Question

Anyone tried to make an application with

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular

? like in this example https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

This command makes an angular + .net core project with bootstrap 3. I'm trying to put bootstrap 4 instead.

I tried to put bootstrap 4 css over vendor.css (where bootstrap 3 is located) but without succes.

Does anyone know how to put bootstrap 4 over bootstrap 3?, eventually with the javascript plugins jquery and popper.

It would be very helpful, thanks!

Answer 1

For the sake of clarity, this is what worked for me.

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

A couple of notes:

• This requires that you have node/npm and webpack installed globally (I think!)
• On a couple of occasions I saw errors from npm/webpack in command prompt. When this occurred I just re-ran the failing command and continued once it was successful.
• If you're using source control, you'll notice that the npm-shrinkwrap.json has been heavily modified. I believe this is to do with upgraded versions of npm, but I'm no expert. Here's some further reading on the subject What is the difference between npm-shrinkwrap.json and package-lock.json?

I've also put together a working sample of the template on GitHub here https://github.com/alterius/AngularSPABootstrap4