error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'
Solution 1
If you have already tried to re npm install
after deleting node_modules, the problem persists, and you also then double-checked that '@ng-bootstrap' is under your node_modules directory, I would proceed as follows:
I would try first restarting the IDE, happens with Visual Studio Code and others as well...
Also you could try this (this would be for linux):
sudo npm install --save @ng-bootstrap/ng-bootstrap
cd @ng-bootstrap
sudo npm install
Make sure, in case you have more than one module, that only the app.module has the import like
NgbModule.forRoot()
, any other module should only haveNgbModule
within the import []
Hope it helps :)
Solution 2
NG Bootstrap - Angular powered Bootstrap widgets
$ npm i @ng-bootstrap/ng-bootstrap
Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem.
Below the list of supportive versions of Anuglar & Bootstrap :
ng-bootstrap - Angular - Bootstrap CSS
1.x.x 5.0.2 4.0.0
2.x.x 6.0.0 4.0.0
3.x.x 6.1.0 4.0.0
4.x.x 7.0.0 4.0.0
5.x.x 8.0.0 4.3.1
6.x.x 9.0.0 4.4.1
7.x.x 10.0.0 4.5.0
Related videos on Youtube
Santosh Shelke
I'm Santosh an UI developer, Having very good experience in UI development.
Updated on January 20, 2022Comments
-
Santosh Shelke over 2 years
I added NGBootstrap in angular 5 project. But after sometime it's not working and I am getting below error. Tried to resolve issue by upgrading CLI version but still issue is not resolve. Please check package.json.
ERROR in src/app/app.module.ts(5,27): error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'. src/app/find-product/searchtabcontent/search-by-family/search-by-family.component.ts(2,48): error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'
package.json
{ "name": "ng5", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", "build": "ng build --prod --base-href=/UI/pages/", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@ng-bootstrap/ng-bootstrap": "^1.1.2", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "^6.0.1", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3", "@angular-devkit/build-angular": "~0.6.1" } }
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ NgbModule.forRoot(), BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
Santosh Shelke almost 6 yearsWorking initially but after sometime again got the error.
-
Javier Aviles almost 6 yearsdid you also remove the package-lock.json?
-
Santosh Shelke almost 6 yearsNo, it's there.
-
Javier Aviles almost 6 yearsremove it as well before re install
-
Santosh Shelke almost 6 yearsTried but no luck.
-
ego2dot0 over 2 yearsThe source is missing