node.js - Kan inte hitta modulen 'ngx-bootstrap'

Jag har ett problem i min applikation med ngx-bootstrap där det nu inte kan upptäcka modulen om du inte anger sökvägen

Till exempel:

import { BsModalService, BsModalRef } from 'ngx-bootstrap';

producerar "Kan inte hitta modulen 'ngx-bootstrap'".

Att ta bort referensen och kontrollera snabblösningar ersätter bara referensen med:

import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';

Uppenbarligen är detta inte idealiskt eftersom de borde vara tillgängliga genom ngx-bootstrap utan att specificera mappen, och jag skulle behöva gå igenom dussintals komponenter och ändra dessa referenser vilket inte borde vara nödvändigt. Har någon haft detta problem tidigare?

Jag har redan försökt:

  • npm install
  • npm update om det har funnits uppdateringar i senaste commits
  • Tar bort mappen node_modules och kör npm install igen
  • Installera om ngx-bootstrap på egen hand - npm install ngx-bootstrap --save
  • npm cache clean
  • Jag har till och med börjat om från början och klonat min app till en annan plats, kört npm install, och samma sak händer

Detta fungerade bra igår. Jag är inte säker på vad jag saknar.

Mer 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"
  },

Om någon har några idéer, låt mig veta

Tack!

Svar #1

Baserat på ngx-bootstrap-dokumentationen, stöder angular 9 inte denna typ av import. Om du vill använda BsModalService, ButtonsModule och så vidare måste du importera dem som nedan:

// RECOMMENDED
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ButtonsModule } from 'ngx-bootstrap/buttons';

istället för :

// NOT RECOMMENDED
import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';

Svar #2

Enligt https://github.com/valor-software/ngx-bootstrap/issues/5753

Uppdaterad dokumentation: 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(){}

Detta är den idealiska lösningen eftersom det är den som dokumenteras av underhållaren av repot.

Svar #3

Jag hade samma problem idag när jag försökte uppdatera från Angular 9.0.2 till Angular 9.1.0.

Jag antar att det beror på att du har i din package.json: "ngx-bootstrap": "^5.3.2", så npm tar den senaste versionen som finns tillgänglig på ngx-bootstrap-taggen: 5.6.0. (Åtminstone är det den version jag har idag)

Jag har löst det genom att helt enkelt ersätta importerna i min kod, från 'ngx-bootstrap' till 'ngx-bootstrap/someBootstrapComponent'.

Till exempel var min tidigare import:

import { BsModalRef, BsModalService } from 'ngx-bootstrap';

Och min nya import ser ut så här:

import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

Jag vet att detta inte är en idealisk lösning, men under tiden kan du åtminstone få din app att kompilera korrekt.

Jag hoppas det hjälper.

Med vänliga hälsningar, Jesús.

Relaterade artiklar