using bootstrap with ng-bootstrap angular 4, angular-cli

Question

I am a css conflict. I am using ng-bootstrap and bootstrap. I was given a template to work on and I wanted to use some of the nice features ng-bootstrap has to offer. However once I the following in my index.html file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Some of the pages css starts to mess up hence conflict.

angular.cli

 "apps": [
        {
            "root": "src/main/webapp/app/",
            "outDir": "build/www/app/",
            "assets": [
                "content",
                "assets"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "",
            "tsconfig": "../../../../tsconfig.json",
            "styles": [
                "styles.css",
                "assets/css/bootstrap.css",
                "assets/css/main.css"
            ],
            "scripts": []
        }
    ],

Is there a way I can use both without them stepping on each other?

Side note: you do _not_ need and should _not_ include jQuery, popper nor bootstrap.min.js - ng-bootstrap is replacing all of those. — pkozlowski.opensource, Aug 19 '17 at 17:59
if you want to use bootstrap and it features without any third party extension check this [answer](https://stackoverflow.com/a/45387777/2708210) — Rahul Singh, Aug 19 '17 at 18:11
@RahulSingh not sure how your comment is relevant here since it doesn't address the question _and_ the linked post is misleading since it _is_ showing a way of pulling jQuery, bootstrap.js etc. Plus the linked post is outdated (ex. Bootstrap is _not_ using tether any more). — pkozlowski.opensource, Aug 20 '17 at 06:43
@pkozlowski.opensource he wants to use bootstrap features with angular I suggested instead of using ng2 directly use bootstrap and if bootstrap dosent use tether include the latest one and it will work the same . I don't think it irrelevant but i guess is more an alternative. That is why i commented instead of an answer — Rahul Singh, Aug 20 '17 at 07:14
@pkozlowski.opensource thanks for the dv though i am guessing but that was u — Rahul Singh, Aug 20 '17 at 07:17
@pkozlowski.opensource I tried to do it like this `styles: [require('../../assets/css/bootstrap.css')]` but I ended up with an error saying: ` Expected 'styles' to be an array of strings.` — Mike3355, Aug 20 '17 at 14:08

using bootstrap with ng-bootstrap angular 4, angular-cli

0 Answers0