Search code examples
angularbootstrap-4angular-ui-bootstrapdropdown

Angular Cannot find module './dropdown-basic'.ts(2307)


I tried to add a Bootstrap DropDown to my angular project. when I tried to import Bootstrap DropDown to app.module.ts file; by adding following code line,

import { NgbdDropdownBasic } from './dropdown-basic';

I am getting below error.

Cannot find module './dropdown-basic'.ts(2307)

I tried to resolve this issue by remove node_modules and re-installed them, but issue is still there. Please check package.json. Can I manually install that package by any chance?

package.json

{
    "name": "lbd-free-angular-cli",
    "version": "1.6.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "9.0.6",
        "@angular/common": "9.0.6",
        "@angular/compiler": "9.0.6",
        "@angular/core": "9.0.6",
        "@angular/forms": "9.0.6",
        "@angular/localize": "^9.1.1",
        "@angular/platform-browser": "9.0.6",
        "@angular/platform-browser-dynamic": "9.0.6",
        "@angular/router": "9.0.6",
        "@ng-bootstrap/ng-bootstrap": "^6.0.2",
        "@ngui/map": "0.30.3",
        "@types/googlemaps": "3.39.3",
        "animate.css": "3.7.0",
        "arrive": "2.4.1",
        "bootstrap": "3.3.7",
        "bootstrap-notify": "3.1.3",
        "chartist": "0.11.0",
        "core-js": "2.6.9",
        "googleapis": "33.0.0",
        "jquery": "3.4.1",
        "perfect-scrollbar": "1.4.0",
        "rxjs": "6.5.4",
        "rxjs-compat": "6.5.4",
        "zone.js": "0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.900.6",
        "@angular/cli": "9.0.6",
        "@angular/compiler-cli": "9.0.6",
        "@types/jasmine": "3.5.9",
        "@types/node": "13.9.0",
        "codelyzer": "5.2.1",
        "jasmine-core": "3.5.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "4.4.1",
        "karma-chrome-launcher": "3.1.0",
        "karma-cli": "2.0.0",
        "karma-jasmine": "3.1.1",
        "karma-jasmine-html-reporter": "1.5.2",
        "karma-coverage-istanbul-reporter": "2.1.1",
        "protractor": "5.4.3",
        "ts-node": "8.6.2",
        "tslint": "6.1.0",
        "typescript": "3.7.5"
    }
}

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app.routing';
import { NavbarModule } from './shared/navbar/navbar.module';
import { FooterModule } from './shared/footer/footer.module';
import { SidebarModule } from './sidebar/sidebar.module';
import { AppComponent } from './app.component';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdDropdownBasic } from './dropdown-basic';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    RouterModule,
    HttpClientModule,
    NavbarModule,
    FooterModule,
    SidebarModule,
    AppRoutingModule,
    BrowserModule,
    NgbModule
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

output

enter image description here


Solution

  • import { NgbdDropdownBasic } from './dropdown-basic';

    This is a wrong import, I think that your are following the Documentation and you think that this is some important import for the dropdown but it's not.

    If you already have imported this in your module:

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    Then you are good to go. Check this how I have used the dropdown module: https://stackblitz.com/edit/ngbd-dropdown-module