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!

Solution 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';

Solution 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.

Solution 3

As per https://github.com/valor-software/ngx-bootstrap/issues/5753

Updated documentation: https://valor-software.com/ngx-bootstrap/#/modals

 // RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

This is the ideal solution as it is the one that is documented by the maintainer of the repo.

Solution 4

So it seems like it might be a problem with later versions of ngx-bootstrap. In my package.json, I replaced "ngx-bootstrap": "^5.3.2" with "ngx-bootstrap": "5.3.2", ran npm install and it built without any problems.

Solution 5

import { ModalModule } from 'ngx-bootstrap/modal';

This must be working .. simple solution

View more solutions