我试图将Bootstrap DropDown添加到我的有角项目中。当我尝试将Bootstrap DropDown导入到app.module.ts文件时;通过添加以下代码行
import { NgbdDropdownBasic } from './dropdown-basic';
我遇到了错误。
找不到模块'./dropdown-basic'.ts(2307)
我试图通过删除node_modules并重新安装它们来解决此问题,但是问题仍然存在。请检查package.json。我可以手动安装该软件包吗?
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 { }
输出
答案 0 :(得分:1)
从'./dropdown-basic'导入{NgbdDropdownBasic};
这是错误的导入,我认为您正在遵循文档,并且您认为这对下拉列表来说是重要的导入,但并非如此。
如果您已将其导入到模块中
从'@ ng-bootstrap / ng-bootstrap'导入{NgbModule};
那你很好。检查一下我如何使用下拉模块: https://stackblitz.com/edit/ngbd-dropdown-module