2

I have installed ngx Bootstrap into my Angular Application to use date picker

Now I am getting error while running the Angular Application

I am putting the details of the error below

ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css ./src/styles.css

Module not found: Error: Can't resolve '/Users/user/Projects/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/Users/user/Projects/CRUD' ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css ./src/styles.css

Module not found: Error: Can't resolve '/Users/user/Projects/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css' in '/Users/user/Projects/CRUD'

I am putting angular.json file code below 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "CRUD": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/CRUD",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "../node_modules/bootstrap/dist/css/bootstrap.min.css",
              "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "CRUD:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "CRUD:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "CRUD:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "CRUD-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "CRUD:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "CRUD:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "CRUD"
}

Package.json code - : 

{
  "name": "crud",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}
Anurag Ranjan
  • 242
  • 1
  • 4
  • 14
  • 1
    import bootstrap.min.css and bs-datepicker.css direct in html file. remove from angular.json file. – Ambuj Khanna Sep 07 '18 at 07:14
  • Hi, if the solution proposed by @AmbujKhanna doesn't work, please post your package.json or angular.json and the Module where you are importing – rick Sep 07 '18 at 07:16
  • If above solution doesn't work then you can try to import both CSS after "style.css" in your angular.json file. – Ambuj Khanna Sep 07 '18 at 07:21
  • @AmbujKhanna Did you import all dependent module in app.module? – core114 Sep 07 '18 at 07:22
  • @rick hello I am uploaded the package.json and angular.json kindly look into it – Anurag Ranjan Sep 07 '18 at 08:29
  • @AmbujKhanna yes – Anurag Ranjan Sep 07 '18 at 08:33
  • @AnuragRanjan Please keep style.css at 1st position and then list down other css files – Ambuj Khanna Sep 07 '18 at 09:43
  • Have you tried rerun of `npm install`? IME this works about 60% of the time. As long as you got component.ts Imports and app.module.ts imports / declarations correct it should work. If it doesnt, triple check these, paying attention for any compile-time errors that are blending in and then rerun. – Nate T Dec 21 '20 at 07:00

3 Answers3

1

You are importing css files from wrong location.

update the angular.json file:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "src/styles.css"
        ],
suhailvs
  • 20,182
  • 14
  • 100
  • 98
0

Step 1.

Inside .angular-cli.json file

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

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2.

Go to styles.css

Import bootstrap by adding this line

@import "~bootstrap/dist/css/bootstrap.css";

These steps solved the errors I got during the building process.

Ambuj Khanna
  • 1,131
  • 3
  • 12
  • 32
  • I am still getting error , I have uploaded the package.json and angular.json code , Kindly look into it – Anurag Ranjan Sep 07 '18 at 08:31
  • Please change the sequence of CSS files."styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], – Ambuj Khanna Sep 07 '18 at 09:42
0

Please remove the line "node_modules/bootstrap/dist/css/bootstrap.min.css" from angular.json file. This will fix your error.

This line is for bootstrap.

When you remove this line, you will lose that better front end look provided by bootstrap.

If you want to continue to experience bootstrap also, Please install bootstrap first.

to install bootstrap, fire this command in your terminal npm install bootstrap --save

then change the angular.json as follow

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

It's important to keep the bootstrap file in the top in styles array list.

Hope everything is okay. Cheer coding :)

Anand Raja
  • 2,676
  • 1
  • 30
  • 35