Bootstrap 4 on Single Page Application Angular + .

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

Answer 2

Since some js components in Bootstrap 4 depends on Tether.js add
"bootstrap": "4.0.0-alpha.6" and "tether": "^1.4.0" to your package.json then delete node_modules folder and run nmp install then because of Bootstrap checking for tether add this to plugins in your webpack.config.vendor.js

plugins: [
    <... your plugins here>,
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "Tether": 'tether'
    })
]

then run

webpack --config webpack.config.vendor.js
webpack

references are: this issue , this and this

Answer 3

You can update the bootstrap version in your package.json like this

 "bootstrap": "4.0.0-alpha.6",

and delete your node_modules and do a npm install again.

That's it. You don't need to touch the webpack.config.vendor.js because it already referenced the bootstrap css 'bootstrap/dist/css/bootstrap.css',

Whenever you add/remove something in webpack, you need to generate the bundle.

webpack --config webpack.config.vendor.js

And run

webpack

to generate the main bundle. Hope this helps.