How to fix bootstrap Error in angular ? What is going wrong

Question

I am not sure why I am getting following error.

ERROR in node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts(118,34): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts(118,40): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(27,44): error TS1144: '{' or ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(28,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(29,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(30,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(31,1): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(13,20): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(13,21): error TS1003: Identifier expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(13,37): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(13,74): error TS1005: '(' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(14,24): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(14,25): error TS1003: Identifier expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(14,41): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(14,51): error TS1005: '(' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/hebrew/ngb-calendar-hebrew.d.ts(14,34): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/hebrew/ngb-calendar-hebrew.d.ts(14,41): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/hijri/ngb-calendar-hijri.d.ts(25,34): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/hijri/ngb-calendar-hijri.d.ts(25,41): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/jalali/ngb-calendar-persian.d.ts(10,34): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/jalali/ngb-calendar-persian.d.ts(10,41): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar.d.ts(54,43): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar.d.ts(54,50): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar.d.ts(71,34): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar.d.ts(71,41): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/highlight.d.ts(27,29): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/highlight.d.ts(27,35): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(79,69): error TS1005: '>' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(79,72): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(79,74): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(79,75): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(95,55): error TS1005: '(' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(119,58): error TS1005: '(' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(122,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(123,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,28): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,58): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,76): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,105): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,126): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,162): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,196): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,224): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,239): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,256): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,270): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,295): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(124,330): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(125,15): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(125,21): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(126,18): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(126,24): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(127,24): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(127,46): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(127,52): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(128,25): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(128,37): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(128,43): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(129,21): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(129,27): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(129,33): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(130,32): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(130,42): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(130,48): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(134,19): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(134,25): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(138,18): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(139,17): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(139,23): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(140,24): error TS1005: ',' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(140,40): error TS1005: ';' expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(140,46): error TS1109: Expression expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(141,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(142,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(143,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(144,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(145,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(146,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(147,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(148,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(149,5): error TS1128: Declaration or statement expected.
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(150,1): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(7,39): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,67): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,76): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,79): error TS1109: Expression expected.
node_modules/@ngrx/store/src/models.d.ts(7,95): error TS1005: '(' expected.
node_modules/@ngrx/store/src/models.d.ts(8,12): error TS1005: ',' expected.
node_modules/@ngrx/store/src/models.d.ts(9,3): error TS1005: ',' expected.
node_modules/@ngrx/store/src/models.d.ts(9,10): error TS1005: ')' expected.
node_modules/@ngrx/store/src/models.d.ts(37,58): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(37,98): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(39,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(45,85): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(45,125): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(47,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(47,64): error TS1005: '(' expected.
node_modules/@ngrx/store/src/models.d.ts(48,59): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(48,99): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(50,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(59,43): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(59,67): error TS1005: ',' expected.
node_modules/@ngrx/store/src/tokens.d.ts(20,83): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(20,126): error TS1109: Expression expected.
node_modules/@ngrx/store/src/tokens.d.ts(24,69): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(24,112): error TS1109: Expression expected.
node_modules/@ngrx/store/src/tokens.d.ts(29,79): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(29,120): error TS1109: Expression expected.

Below is my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AllowMeClientAngular": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AllowMeClientAngular",
            "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/nouislider/distribute/nouislider.min.css",
              "node_modules/angular-calendar/scss/angular-calendar.scss",
              "node_modules/dragula/dist/dragula.css",
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/videogular2/fonts/videogular.css",
              "node_modules/@swimlane/ngx-datatable/release/index.css",
              "node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
              "node_modules/sweetalert2/dist/sweetalert2.min.css",
              "src/assets/css/prism.min.css",
              "src/assets/css/wizard.css",
              "src/assets/css/quill.snow.css",
              "src/assets/css/quill.bubble.css",
              "src/assets/css/hopscotch.css",
              "src/assets/css/demo.css",
              "src/assets/sass/app.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/vendor/pace/pace.min.js",
              "src/assets/js/perfect-scrollbar.jquery.min.js"
            ]
          },
          "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": "AllowMeClientAngular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AllowMeClientAngular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AllowMeClientAngular: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": [

            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/vendor/pace/pace.min.js",
              "src/assets/js/perfect-scrollbar.jquery.min.js"
            ],
            "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/**"
            ]
          }
        }
      }
    },
    "AllowMeClientAngular-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AllowMeClientAngular:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AllowMeClientAngular:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "AllowMeClientAngular"
}

Below is package.json

{
  "name": "allow-me-client-angular",
  "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": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.4.0",
    "@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/material": "^6.4.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@material/form-field": "^0.37.1",
    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
    "@ngrx/store": "^8.6.0",
    "@ngx-translate/core": "^12.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-datatable": "^16.0.3",
    "angular-calendar": "^0.28.2",
    "bootstrap": "^4.4.1",
    "core-js": "^2.5.4",
    "jquery": "^3.4.1",
    "ng-chartist": "^4.1.0",
    "ng-pick-datetime": "^6.0.10",
    "ng2-dragula": "^2.1.1",
    "ng2-smart-table": "^1.5.0",
    "ngx-bootstrap": "^3.0.1",
    "ngx-password-toggle": "^1.0.3",
    "ngx-show-hide-password": "^1.2.4",
    "ngx-toastr": "^12.0.0",
    "ngx-webstorage": "^2.0.1",
    "node-sass": "^4.13.1",
    "nouislider": "^14.1.1",
    "rxjs": "^6.0.0",
    "sweetalert2": "^9.7.2",
    "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"
  }
}

Can someone just explain what this error mean so that I can look for some solution. The issue is I not able to figure out what is exact issue.

Answer 1

Package @ng-bootstrap: ^5.3.0 is not compatible with @angular: "^6.0.3. See list of required versions: https://ng-bootstrap.github.io/#/getting-started

Hint: downgrading to "@ng-bootstrap/ng-bootstrap": "^3.0.0" should work.

Answer 2

Try by putting it in your angular.json file in this manner-

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