error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'

Question

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 { }

Folder is there, tried to install ngBootstrap again but no luck. — Santosh Shelke
Are you doing NgbModule.forRoot() on the import of your module root? — Malcor
I installed NG-Bootstarp by following guidelines ng-bootstrap.github.io/#/getting-started — Santosh Shelke

Javier Aviles Javier Aviles · Accepted Answer · 2018-05-16T11:24:02

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):
1. sudo npm install --save @ng-bootstrap/ng-bootstrap
2. cd @ng-bootstrap
3. 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 have NgbModule within the import []

Hope it helps :)

error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'

6 Answers