0

Hi angular community !

Yesterday I setup ng-bootstrap following these steps Getting started with Ng-Bootstrap and everyting worked fine. This morning I started my ng serve --open as usual and I got this message in the terminal:

ERROR in multi ./src/styles.css ./~/font-awesome/css/font-awesome.min.css ./~/bootstrap/dist/css/bootstrap.min.css
Module not found: Error: Can't resolve '/home/papamilo/Documents/Workspace/Test_a2json/front-end_copy_new/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/home/papamilo/Documents/Workspace/Test_a2json/front-end_copy_new/node_modules/@angular/cli/models/webpack-configs'
 @ multi ./src/styles.css ./~/font-awesome/css/font-awesome.min.css ./~/bootstrap/dist/css/bootstrap.min.css
webpack: Failed to compile

`

NOTE: The thing very strange is when I go to my node module folder I cannot see any bootstrap folder

my angular-cli.json:

`{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
  "name": "front-end"
  },
 "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    "./assets/js/jquery-3.1.1.min.js",
    "./responsive.js"
  ],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
    }
   }
  ],
   "e2e": {
   "protractor": {
    "config": "./protractor.conf.js"
  }
  },
  "lint": [
  {
  "project": "src/tsconfig.app.json"
  },
  {
  "project": "src/tsconfig.spec.json"
  },
  {
  "project": "e2e/tsconfig.e2e.json"
  }
  ],
"test": {
"karma": {
  "config": "./karma.conf.js"
   }
  },
  "defaults": {
"styleExt": "css",
"component": {}
  }
}

`

my package.json:

`{
"name": "front-end",
"version": "0.0.0",
"license": "Private",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
"@angular/animations": "^4.0.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.1.0-rc.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.30",
"@ngrx/store": "^4.0.0",
"@swimlane/ngx-charts": "^5.3.1",
"angular-highcharts": "^3.2.1",
"angular2-highcharts": "^0.5.5",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"d3": "^4.9.1",
"font-awesome": "^4.7.0",
"highcharts": "^5.0.12",
"rxjs": "^5.1.0",
"typescript": "^2.2.1",
"zone.js": "^0.8.4"
  },
  "devDependencies": {
"@angular/cli": "^1.2.1",
"@angular/compiler-cli": "^4.0.0",
"@types/highcharts": "^4.2.56",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"canonical-path": "0.0.2",
"codelyzer": "~2.0.0",
"concurrently": "^3.2.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.16.4",
"protractor": "~5.1.0",
"rimraf": "^2.5.4",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
  }
}`

1 Answer 1

1

It seems that bootstrap dependency is not present, try to add it to your project:

npm install [email protected] --save

Note: ng-bootstrap page says they are aiming bootstrap 4 which is in alpha state

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.