Help with upgrading to Bootstrap4

[Vx2gas]

Hello,

Any advice on updating to Bootstrap4 for this sweet template? When I try to do this, I get all sorts of errors.

I add the following to package.json:
"bootstrap": "^4.0.0-alpha.6",

I update the vendor webpack file:
webpack --config webpack.config.vendor.js

I get issues about tether. Is there something I'm doing wrong?

Thanks in advance!

[SteveSandersonMS]

That's strange. I just went to the Angular2Spa template directory, ran:

yarn add bootstrap@^4.0.0-alpha.6
webpack --config webpack.config.vendor.js
webpack

... and it built without errors. Then running it with dotnet run also worked without errors (although the layout in the browser went weird, because I guess Bootstrap 4 requires use of different CSS classes or element structure).

I'll mark this as closed because it doesn't appear to be a bug (clearly it's a support request), but please feel free to post further here if you have further details to discuss. Hope that's OK!

[SteveSandersonMS]

Oh wait I see. You mean there was a client-side error about tether, not a build-time error.

This is a Bootstrap usage question. Please see Bootstrap docs or look generally on StackOverflow, e.g., http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h

[Vx2gas]

Thanks Steve!

I was able to get it working by adding
"tether": "^1.4.0" to the package.json,

And 'tether', to the webpack.config.vendor.js

And added the following to the plugins section in the webpack.config.vendor.js
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Tether: "tether", "window.Tether": "tether", }),

Then simply just updated the html for bootstrap4, and boom.

Keep up the great work here!

[btmadison]

I see this is closed already, but I wanted to say another option instead of including the plugins as mentioned here such as Tether, along with bootstrap js, is to just use @ng-bootstrap or valor's ng-bootstrap, which handles the necessity of including bootstrap's js file and other dependencies. Adding '@ng-bootstrap/ng-bootstrap' for example to the vendor and removing bootstrap and tether seems a bit of a cleaner option.

[JohnGalt1717]

Hi @btmadison I tried to do as you suggest and I get a zoneaware error saying that jquery needs to be loaded before bootstrap. So I put jquery before the @ng-bootstrap command in the webpack.config.vendor.js and I still get the error. What am I doing wrong?

[JoshClose]

Hi @SteveSandersonMS. I still can't get this working. I have added tether to the provider plugin, installed the dependency separately, imported it before bootstrap... nothing seems to work.

I created a project that reproduces the issue. https://github.com/JoshClose/TetherIssue

Thanks.

[JohnGalt1717]

Don't use jquery. Just use the .css from bootstrap and use ngx-bootstrap. Put both in your webpack.config.vendor.js file and rebuild it and then use the ngx commands.

[JoshClose]

I'm using React, not Angular. It might be an option to use https://react-bootstrap.github.io/ though.

[JohnGalt1717]

Yes. Definitely don't inflict jquery on your solution if you can avoid it.

[JoshClose]

Yeah... I've been thinking of just using Bulma, but this needs to be handed over to another team eventually, and bootstrap is more familiar to people.