Cannot find module 'ngx-bootstrap'

Question

I'm having an issue in my application with ngx-bootstrap whereby it now can't detect the module unless you specify the path

For example:

import { BsModalService, BsModalRef } from 'ngx-bootstrap'; 

produces "Cannot find module 'ngx-bootstrap'".

Removing the reference and checking quickfixes just replaces the reference with:

import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api'; 

Obviously this isn't ideal as they should be available through ngx-bootstrap without specifying the folder, and i would have to go through dozens of components and change these references which shouldn't be necessary. Has anyone had this problem before?

I've already tried:

• npm install
• npm update in case there were updates in recent commits
• Deleting node_modules folder and doing npm install again
• Re-installing ngx-bootstrap on its own - npm install ngx-bootstrap --save
• npm cache clean
• I've even started afresh and cloned my app into another location, run npm install, and the same thing happens

This was working fine yesterday. I'm not sure what I'm missing.

More info:

Angular CLI: 9.0.2 Node: 12.16.1 OS: win32 x64 Angular: 9.0.1 

package.json:

    "private": true,   "dependencies": {     "@agm/core": "^1.1.0",     "@angular-devkit/build-angular": "^0.900.7",     "@angular/animations": "9.0.1",     "@angular/cdk": "^9.2.0",     "@angular/common": "9.0.1",     "@angular/compiler": "9.0.1",     "@angular/core": "9.0.1",     "@angular/forms": "9.0.1",     "@angular/platform-browser": "9.0.1",     "@angular/platform-browser-dynamic": "9.0.1",     "@angular/router": "9.0.1",     "@auth0/angular-jwt": "^4.0.0",     "@microsoft/signalr": "^3.1.3",     "@ng-select/ng-select": "^3.7.3",     "@ngx-progressbar/core": "^5.3.2",     "@ngx-pwa/local-storage": "^9.0.3",     "@types/date-fns": "^2.6.0",     "angular-9-datatable": "^0.1.1",     "angular-calendar": "^0.28.2",     "angular-gauge": "^3.1.2",     "angular-gridster2": "^9.0.1",     "angular-resize-event": "^1.2.1",     "bootstrap": "^4.4.1",     "chartjs-plugin-annotation": "^0.5.7",     "ckeditor4-angular": "^1.1.0",     "core-js": "^3.6.4",     "crypto-js": "^4.0.0",     "echarts": "^4.7.0",     "file-saver": "^2.0.2",     "html2canvas": "^1.0.0-rc.5",     "jspdf": "^1.5.3",     "moment": "^2.24.0",     "moment-timezone": "^0.5.27",     "ng-dynamic-component": "^6.1.0",     "ng2-dragula": "^2.1.1",     "ng4-charts": "^1.0.2",     "ngx-bootstrap": "^5.3.2",     "ngx-color": "^4.1.1",     "ngx-echarts": "^4.2.2",     "ngx-image-compress": "^8.0.4",     "ngx-image-cropper": "^3.1.5",     "ngx-infinite-scroll": "^8.0.1",     "ngx-material-timepicker": "^5.5.1",     "ngx-pagination": "^5.0.0",     "ngx-swiper-wrapper": "^9.0.1",     "ngx-toastr": "^12.0.1",     "pluralize": "^8.0.0",     "rxjs": "6.5.4",     "rxjs-compat": "6.5.4",     "time-ago-pipe": "^1.3.2",     "tslib": "^1.10.0",     "valid-url": "^1.0.9",     "zone.js": "^0.10.3"   },   "devDependencies": {     "@angular/cli": "9.0.2",     "@angular/compiler-cli": "9.0.1",     "@angular/language-service": "9.0.1",     "@types/echarts": "^4.4.4",     "@types/file-saver": "^2.0.1",     "@types/googlemaps": "^3.39.2",     "@types/jasmine": "3.5.3",     "@types/jasminewd2": "2.0.8",     "@types/jspdf": "^1.3.3",     "@types/node": "^13.9.8",     "@types/pluralize": "0.0.29",     "@types/valid-url": "^1.0.3",     "codelyzer": "^5.2.2",     "ie-shim": "^0.1.0",     "jasmine-core": "~3.5.0",     "jasmine-spec-reporter": "~4.2.1",     "karma": "^4.4.1",     "karma-chrome-launcher": "~3.1.0",     "karma-coverage-istanbul-reporter": "~2.1.1",     "karma-jasmine": "~3.1.1",     "karma-jasmine-html-reporter": "^1.5.3",     "node-sass": "^4.13.1",     "protractor": "~5.4.3",     "ts-node": "~8.6.2",     "tslint": "~6.0.0",     "typescript": "3.7.5",     "webpack-bundle-analyzer": "^3.6.1"   }, 

If anyone has any ideas let me know

Thanks!

Answer 1

Based on ngx-bootstrap documentation, angular 9 doesn't support this kind of import . If you want to use BsModalService , ButtonsModule and so on you have to import them as below :

// RECOMMENDED import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; import { ButtonsModule } from 'ngx-bootstrap/buttons'; 

instead of :

// NOT RECOMMENDED import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap'; 

Answer 2

I had the same problem today, trying to update from Angular 9.0.2 to Angular 9.1.0.

I guess it's because you have in your package.json: "ngx-bootstrap": "^5.3.2", so npm is taking the latest version available on ngx-bootrap tag: 5.6.0. (At least that's the version I have today)

I've solved just replacing the imports on my code, from 'ngx-bootstrap' to 'ngx-bootstrap/someBootstrapComponent'.

For example, my previous import was:

import { BsModalRef, BsModalService } from 'ngx-bootstrap'; 

And my new import looks like:

import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 

I know this is not an ideal solution, but meanwhile at least you can have your app compiling properly.

I hope it helps.

Best regards, Jesús.