CODEWITHSUNDEEP
angularasp.net-coresingle-page-applicationbootstrap-4
Marian
Marian

Reputation: 295

Bootstrap 4 on Single Page Application Angular + .Net Core

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!

Upvotes: 2

Views: 7819

Answers (3)

KavehG
KavehG

Reputation: 323

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

Upvotes: 0

James Law
James Law

Reputation: 6733

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

Upvotes: 8

brijmcq
brijmcq

Reputation: 3418

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.

Upvotes: 3

Related Questions