[英]Error Using ng2 bootstrap in App
我是Angular 2的新手,嘗試在我的應用程序中使用ng2-bootstrap。 我遵循了有關angular-cli入門的說明。 以下是我的app.module.ts和angular-cli.json文件。
當我嘗試在其中一個組件上使用時,出現5次以下錯誤:
例外:未捕獲(承諾):錯誤:模板解析錯誤:'accordion'不是已知元素:1.如果'accordion'是Angular組件,請驗證它是否屬於此模塊。 2.如果“ accordion”是Web組件,則將“ CUSTOM_ELEMENTS_SCHEMA”添加到該組件的“ @ NgModule.schemas”以禁止顯示此消息。
我想念什么? 我需要采取什么步驟來整合ng2-bootstrap?
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy,
HashLocationStrategy,CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { SupplierDataService } from './services/supplier-data.service';
import { Angular2FontawesomeModule} from 'angular2-fontawesome';
import { AccordionModule } from 'ng2-bootstrap/accordion';
// Routing Module
import { AppRoutingModule } from './app.routing';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
// Http
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
CommonModule,
AppRoutingModule,
ChartsModule,
DashboardModule,
Angular2FontawesomeModule,
HttpModule,
AccordionModule.forRoot()
],
declarations: [
AppComponent,
FullLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective
],
providers: [SupplierDataService,
{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
角cli.json
{
"project": {
"version": "1.5.10",
"name": "core-ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"scss/style.scss",
"../vendor/styles/wijmo.css",
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/theme-fresh.css",
"../node_modules/ag-grid/dist/styles/theme-bootstrap.css",
"../node_modules/ag-grid/dist/styles/theme-material.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.bundle.min.js",
"../node_modules/chart.js/dist/Chart.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [ "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}
我認為您錯過了必須在angular-cli.json中的腳本中導入的bootstrap.js文件。
"scripts": [
"../node_modules/chart.js/dist/Chart.bundle.min.js",
"../node_modules/chart.js/dist/Chart.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.