Angular 6 : Cannot find name 'bootbox'

Question

I am trying to use bootbox in my angular application. I followed the instructions from this answer. But when I build the project I get

error TS2304: Cannot find name 'bootbox'.

My package.json file

"dependencies": {
    "@angular/animations": "6.0.2",
    "@angular/common": "6.0.2",
    "@angular/compiler": "6.0.2",
    "@angular/core": "6.0.2",
    "@angular/forms": "6.0.2",
    "@angular/http": "6.0.2",
    "@angular/platform-browser": "6.0.2",
    "@angular/platform-browser-dynamic": "6.0.2",
    "@angular/router": "6.0.2",
    "ag-grid": "17.1.1",
    "ag-grid-angular": "17.1.0",
    "angular2-tree-component": "3.1.0",
    "bootbox": "^4.4.0",
    "bootstrap": "^3.3.7",
    "core-js": "2.5.4",
    "install": "^0.11.0",
    "jquery": "3.3.1",
    "mydatepicker": "2.6.3",
    "ng2-webstorage": "2.0.0",
    "primeng": "6.0.0-alpha.1",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.1.0",
    "zone.js": "0.8.26"
},
"devDependencies": {
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "~6.0.3",
    "@angular/compiler-cli": "6.0.2",
    "@angular/language-service": "6.0.2",
    "@types/bootbox": "^4.4.32",
    "@types/bootstrap": "^4.1.0",
    "@types/core-js": "0.9.46",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.1",
    "@types/node": "8.9.5",
    "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": "~1.4.2",
    "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",
    "typescript": "~2.7.2"
}

My angular.json

"scripts": [
    "node_modules/core-js/client/shim.min.js",
    "src/assets/js/Chart.bundle.min.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/bootstrap/dist/js/bootstrap.js",            
    "node_modules/bootbox/bootbox.js",
    "src/assets/js/custom.js"
]

I believe, I have followed the instructions correctly, but not able to find where I have gone wrong.

Answer 1

Step 1: Install jquery, bootstrap and then bootbox using npm

Step 2: In your angular.json (angular-cli.json for Angular <= v5) file, add the following under scripts section

"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js",            
"node_modules/bootbox/bootbox.js",  

Step 3: Install the types

npm install @types/jquery --save
npm install @types/bootbox --save

Step 4: Build the project and check if the build is successful. If build is successful, then stop here.

Step 5: If the build is not successful, then create a file named typings.d.ts under your src folder and add the following contents and build the project. This should fix the issue.

declare var bootbox: any;