How to import Bootstrap 4 theme in Angular 4 or 4+ app

Question

I'm new in learning Angular. I have tried to import bootstrap 4 single page template in angular 4 This one: https://startbootstrap.com/template-overviews/new-age/.But when i see this in my localhost it doesn't load some function like smooth scrolling etc.. seems like new-age.js file is not loading.How to fix this?

Saved files(css,js,jquery,bootstrap) are in src/assests folder.
I linked the file in angular.json like

"styles": [
          "src/styles.css",
          "src/assets/vendor/bootstrap/css/bootstrap.min.css",
          "src/assets/vendor/font-awesome/css/font-awesome.min.css",
          "src/assets/vendor/simple-line-icons/css/simple-line-icons.css",
          "src/assets/device-mockups/device-mockups.min.css",
          "src/assets/css/new-age.min.css"
        ],
        "scripts": [
          "src/assets/vendor/jquery/jquery.min.js",
          "src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
          "src/assets/vendor/jquery-easing/jquery.easing.min.js",
          "src/assets/js/new-age.js"
        ]

HTML is in app.component.html

you need to include your code for anyone to understand where the problem is and potentially help you out. — Sunny Gohil, May 15 '18 at 09:32
Checkout [ng-bootstrap](https://ng-bootstrap.github.io/#/home), use that within your project then import your custom CSS. — Malcor, May 15 '18 at 09:42
Sometimes, the order of importing the js files also matters. — Srinivasan K K, May 15 '18 at 10:44

score 2 · Answer 1 · answered May 15 '18 at 10:58

Using angular, I'd recommend to use ng-bootstrap instead. All you need to do is to import bootstrap's stylesheet in your angular-cli.json (and your personal stylesheet afterwards(!)):

"styles": [
          "src/assets/vendor/bootstrap/css/bootstrap.css",
          "src/styles.css"
        ],

Then you import ng-bootstrap in your app.module's import array, with:

NgbModule.forRoot(),

And you can use all the pre-made components, adapted to angular.

Karthic G · Answer 2 · 2018-05-15T11:43:00.560

Try this,

Add below lines in index.html and before that check whether scripts and css folder exists in assets folder or not. if not add them manually and added the corresponding files into those folders.

index.html:

 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="assets/css/font-awesome.min.css">
 <script src="assets/Scripts/bootstrap.min.js"></script>

How to import Bootstrap 4 theme in Angular 4 or 4+ app

2 Answers2