0
299
VistasNo se puede encontrar el módulo 'ngx-bootstrap'
Tengo un problema en mi aplicación con ngx-bootstrap por lo que ahora no puede detectar el módulo a menos que especifique la ruta
Por ejemplo:
import { BsModalService, BsModalRef } from 'ngx-bootstrap';produce " No se puede encontrar el módulo 'ngx-bootstrap' ".
Eliminar la referencia y verificar los arreglos rápidos simplemente reemplaza la referencia con:
import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';Obviamente, esto no es ideal, ya que deberían estar disponibles a través de ngx-bootstrap sin especificar la carpeta, y tendría que revisar docenas de componentes y cambiar estas referencias que no deberían ser necesarias. ¿Alguien tuvo este problema antes?
Ya he probado:
-
npm install -
npm updateen caso de que haya actualizaciones en confirmaciones recientes - Eliminando la carpeta node_modules y haciendo
npm installnuevamente - Reinstalación de ngx-bootstrap por sí solo -
npm install ngx-bootstrap --save -
npm cache clean - Incluso comencé de nuevo y cloné mi aplicación en otra ubicación,
npm instally sucedió lo mismo
Esto estaba funcionando bien ayer. No estoy seguro de lo que me estoy perdiendo.
Más información:
Angular CLI: 9.0.2 Node: 12.16.1 OS: win32 x64 Angular: 9.0.1paquete.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" },Si alguien tiene alguna idea que me avise
¡Gracias!
7 Respuestas
Responde la pregunta0
Tuve el mismo problema hoy, tratando de actualizar de Angular 9.0.2 a Angular 9.1.0 .
Supongo que es porque tiene en su paquete.json : "ngx-bootstrap": "^5.3.2" , por lo que npm está tomando la última versión disponible en la etiqueta ngx-bootrap: 5.6.0 . (Al menos esa es la versión que tengo hoy)
Lo resolví simplemente reemplazando las importaciones en mi código, de 'ngx-bootstrap' a 'ngx-bootstrap/someBootstrapComponent' .
Por ejemplo, mi importación anterior fue:
import { BsModalRef, BsModalService } from 'ngx-bootstrap';Y mi nueva importación se parece a:
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';Sé que esta no es una solución ideal, pero mientras tanto, al menos puedes hacer que tu aplicación se compile correctamente.
Espero que ayude.
Saludos, Jesús.
0
Entonces parece que podría ser un problema con versiones posteriores de ngx-bootstrap. En mi paquete.json, reemplacé "ngx-bootstrap": "^5.3.2" con "ngx-bootstrap": "5.3.2" , ejecuté npm install y se compiló sin ningún problema.
0
Por alguna razón, el mismo paquete.json que se ejecutó antes, ahora no funciona. Los consejos anteriores funcionan a las mil maravillas. Solución: eliminar el ^. "ngx-bootstrap": "^5.3.2" a "ngx-bootstrap": "5.3.2"
0
Según https://github.com/valor-software/ngx-bootstrap/issues/5753
Documentación actualizada: 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(){}Esta es la solución ideal ya que es la que está documentada por el mantenedor del repositorio.
0
Según la documentación de ngx-bootstrap , angular 9 no admite este tipo de importación. Si desea utilizar BsModalService , ButtonsModule , etc., debe importarlos de la siguiente manera:
// RECOMMENDED import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; import { ButtonsModule } from 'ngx-bootstrap/buttons';en lugar de :
// NOT RECOMMENDED import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';0
importar { ModalModule } desde 'ngx-bootstrap/modal';
Esto debe estar funcionando ... solución simple
0
Actualmente estoy usando Angular 9 con la última versión de ngx-bootstrap. Creo que la última implementación es importar BsDatepickerModule en el archivo app.module.ts de esta manera
Declaración de importación en el código app.module.ts:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';en app.module.ts importaciones:
imports: [ BrowserAnimationsModule, BsDatepickerModule.forRoot()]
Código de componente:
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' }); } }paquete.json
"@angular/core": "~9.1.7", "bootstrap": "^4.5.0", "ngx-bootstrap": "^5.6.1", "@angular/cli": "~9.1.6 " 
Desde el sitio oficial:
Uso
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// RECOMENDADO
importar { BsDatepickerModule } desde 'ngx-bootstrap/datepicker';
// NO RECOMENDADO (Angular 9 no admite este tipo de importación)
importar { BsDatepickerModule } desde 'ngx-bootstrap';
@MóduloNg({
importaciones: [
BrowserAnimationsModule, BsDatepickerModule.forRoot(), ...] })
clase de exportación AppModule(){}