如何将 Bootstrap 集成到 angular CLI 项目中

Question

I'm relatively new to integrating bootstrap into angular and I started by running the npm i --save bootstrap@3 command which downloaded the required files into the node_modules folder of my angular project.

However, when I went to the angular.json file to input the relative path into the "styles" section, I got the following error:

 "styles": [
              "src/node_modules/boostrap/dist/css"
            ],

ERROR in multi./src/node_modules/boostrap/dist/css Module not found: Error: Can't resolve 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop\src\node_modules\boostrap\dist\css' in 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop'

I made sure to use backslash. The angular node modules folder is outside the src folder. Do I need to go up one tier? ../? The output path is:

"outputPath": "dist/YoavOnlineShop",

edit: Thank you guys, it doesn't produce an error now. However, the styles of bootstrap aren't being applied. Do I need to add anything into the app.module or the specific components?

Before integrating bootstrap like above, I used CDN and it worked fine but now I think I broke it.

Answer 1

change the path like this

 "styles": [
                  "src/styles.css",
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "node_modules/font-awesome/css/font-awesome.css",
                  "node_modules/toastr/build/toastr.min.css"
                ],

why node_modules/bootstrap not src/node_modules/bootstrap because the angular path from current angular.json file is nodue_models which CLI will take care. And remember dist path formation and minimization is also taken care by cli not your code explicitly.

Answer 2

Try this:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
]

It is outside the src folder but inside the angular project, so you can access it as shown above.

Check this guy here if you want to load a specific version locally and on how to use it.

Answer 3

to install bootstrap jquery popper.js and font-awesome we need to tape this request

npm install bootstrap jquery popper.js and font-awesome

and in angular.json we put the relative path of all our elements

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/salam-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
        

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