Cannot find module 'ngx-bootstrap' - node.js

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

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.

Answer 3

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.

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

Answer 5

import { ModalModule } from 'ngx-bootstrap/modal';
This must be working .. simple solution

Answer 6

For some reason, the same package.json that's ran before, now doesn't works. The advice above work like a charm.
Solution: remove the ^.
"ngx-bootstrap": "^5.3.2" to "ngx-bootstrap": "5.3.2"

Answer 7

I am currently using Angular 9 with the latest version of ngx-bootstrap.
I believe the latest implementation is to import the BsDatepickerModule in the app.module.ts file like this
Import statement in app.module.ts code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
in app.module.ts imports:
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot()
]
Component Code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
#Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
bsConfig: Partial<BsDatepickerConfig>;
constructor() {}
ngOnInit() {
this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });
}
}
package.json
"#angular/core": "~9.1.7",
"bootstrap": "^4.5.0",
"ngx-bootstrap": "^5.6.1",
"#angular/cli": "~9.1.6"
From the official site:
Usage
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// RECOMMENDED
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { BsDatepickerModule } from 'ngx-bootstrap';
#NgModule({
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot(),
...
]
})
export class AppModule(){}
https://valor-software.com/ngx-bootstrap/#/datepicker
techjunkieblog.com