2

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!

Marian
  • 295
  • 4
  • 13

3 Answers3

8

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

James Law
  • 6,067
  • 4
  • 36
  • 49
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.

brijmcq
  • 3,354
  • 2
  • 17
  • 34
  • 1
    It doesn't working :|. For npm install i have new bootstrap in node modules, but the site uses bootstrap 3 because in vendor.css is bootstrap 3. If i put bootstrap 4 in vendor css i get other errors. I should give up on "dotnet new angular" command and start from 0? (API + Client side Angular). That approach has some big benefits over the manual approach with API + Client side angular, without vendor.js etc. – Marian Aug 25 '17 at 17:07
  • It is possible to overrite the generated files vendor js, vendor css, main client.js.. I want to restart the process, to make new files. I think the webpack makes this files the first time we run the application. How i can tell him to do it again ? – Marian Aug 25 '17 at 18:34
  • @Marian i forgot to mention running the webpack again. I'll update my answer so that others can see – brijmcq Aug 26 '17 at 11:19
  • I followed the instructions above but with Bootstrap4-beta3 you also have to install popper.js. Therefore just add "npm install popper.js --save" just before the "webpack --config webpack.config.vendor.js" step and it all works – Frank Cannon Jan 15 '18 at 19:32
  • @FrankCannon glad it helped you. You could also try other library like ng-bootstrap or ngx-bootstrap so you don't need to add jquery, bootstrap.js and popper.js in your project. Cheers! – brijmcq Jan 15 '18 at 23:00
0

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

KavehG
  • 303
  • 1
  • 2
  • 11