エラーアプリケーションでng2ブートストラップを使用

Question

私は、アプリケーションでng2-bootstrapを使用しようとすると、角度2を初めて使用しました。私は角膜鏡を始めるための指示に従った。以下は私のapp.module.tsとangular-cli.jsonファイルです。私は私のコンポーネントのいずれかに使用しようとすると

は、私は次のエラー5回取得：

例外：キャッチされない（約束で）：エラー：テンプレートの解析エラー： 「アコーディオン」は、既知の要素ではありません： 1. 'accordion'がAngularコンポーネントの場合、このモジュールの一部であることを確認します。 2. 'accordion'がWebコンポーネントの場合は、このコンポーネントの '@ NgModule.schemas'に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。

私には何が欠けていますか？ 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 
    } 
} 

Answer 1

私はあなたがあなたがスクリプト内でインポートする必要がbootstrap.jsファイルを逃したと思いますangular-cli.json。

"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" 
     ]