在 Angular CLI 中使用 Bootstrap 的最佳方法是什么

Question

Which one is the best practice to use Bootstrap in Angular-Cli Project?

Using this method: https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2

Or

Using ngx-bootstrap: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md

Answer 1

The best way for me is:

• Create a project with ng new
• Install bootstrap, jquery and font-awesome with npm install bootstrap@4.0.0-alpha.6 jquery font-awesome

• in your .angular-cli.json add:

  "apps": [{ "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ]

This will automatically compile the bootstrap css and javascript, font-awesome and jquery, which is required by the bootstrap js, in your index.html.

Note : The jquery.min.js under scripts must be included before the bootstrap.min.js is included, because bootstrap.min.js requires jquery.min.js to work properly.

UPDATE: Bootstrap 4 requires tether.js. Install it with npm install tether and add it to your scripts in .angular-cli.json BEFORE bootstrap.min.js.

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"

Answer 2

Prefer using ng-bootstrap to bootstrap in any angular project.

Below is a comment taken from documentation .

The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.