21

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

8 Answers 8

12

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 :)

5
  • Working initially but after sometime again got the error. May 16, 2018 at 11:43
  • did you also remove the package-lock.json? May 16, 2018 at 12:13
  • No, it's there. May 16, 2018 at 12:17
  • remove it as well before re install May 16, 2018 at 12:24
  • Tried but no luck. May 16, 2018 at 12:35
5

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

1
  • The source is missing
    – ego2dot0
    Jan 14, 2022 at 17:30
1

you have juste to tape this commande:

npm i @ng-bootstrap/ng-bootstrap --force
0

I have tried this method: 1. delete your module node folder then 2. delete your package-lock.json file 3. run npm install 4. run ng serve -o

This works for me, I hope you do too :)

0

i solved this issue by updating ng update @angular/core.Please try this

0

Just in case if someone comes across this error. I tried all the answers, but what actually resolved it was closing VS Code and reopening. To my surprise, the error was gone.

0

I solved the same issue by following steps:

  1. Check the angular version: Using command: ng version My angular version is: Angular CLI: 7.3.10

  2. After that I have support version of ngx bootstrap from the link: https://www.npmjs.com/package/ngx-bootstrap

  3. In package.json file update the version: "bootstrap": "^4.5.3", "@ng-bootstrap/ng-bootstrap": "^4.2.2",

  4. Now after updating package.json, use the command npm update

  5. After this use command ng serve and my error got resolved

0

Same issue happened for me too. I tried deleting node_modules folder and package-lock.json file And tried all ways listed in forums. Main issue was @ng-bootstrap/ng-bootstrap was not listed in VSC as declarative. Means it was not properly installed. Hence i was not able to use the NgbModule.

This issue was resolved by excuting following comomands VSC terminal at angular project folder location:-

npm install bootstrap --save
npm install --save @ng-bootstrap/ng-bootstrap 

above command erred due to dependencies issue. i updated npm version

npm update  
npm version 
npm install --legacy-peer-deps @ng-bootstrap/ng-bootstrap
npm install --typesript@latest --save 

above command is optional, you can skip, i did this as i found typescript version lower under vulnerabilities listing.

npm audit fix --force

finally i got @ng-bootstrap declarative in VSC.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.