39

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!

chr15r
  • 569
  • 1
  • 5
  • 8

7 Answers7

66

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';
Abolfazl Roshanzamir
  • 12,730
  • 5
  • 63
  • 79
13

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.

fromage9747
  • 344
  • 2
  • 9
12

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.

Jesús Sobrino
  • 387
  • 2
  • 5
  • Thanks Jesús. It's strange as I work on a dev team with 5 other guys using the same project, and it's not happening for any of them. We upgraded angular about a month ago so don't think it has anything to do with any sort of update. Very weird! If all else fails I will have to replace all the imports but I might hold off and see if anyone else has any ideas! Thanks! – chr15r Apr 07 '20 at 16:21
7

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.

chr15r
  • 569
  • 1
  • 5
  • 8
6

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

This must be working .. simple solution

Faraz Shaikh
  • 347
  • 1
  • 10
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"

Pedro Braz
  • 29
  • 3
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" enter image description here

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

techjunkie
  • 171
  • 1
  • 4