0
297
ViewsCannot find module 'ngx-bootstrap'
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 installnpm updatein case there were updates in recent commits- Deleting node_modules folder and doing
npm installagain - 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!
7 answers
Answer question0
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.
0
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.
0
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"
0
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.
0
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';
0
import { ModalModule } from 'ngx-bootstrap/modal';
This must be working .. simple solution
0
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(){}