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 npm install
againnpm install ngx-bootstrap --save
npm cache clean
npm install
, and the same thing happensThis 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!
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';
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.
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.
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.
import { ModalModule } from 'ngx-bootstrap/modal';
This must be working.. simple solution
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"
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(){}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.