MrMalith
MrMalith

Reputation: 1372

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

Upvotes: 0

Views: 1383

Answers (1)

Immad Hamid
Immad Hamid

Reputation: 789

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

Upvotes: 2

Related Questions