Question

我是Angular 2的新手，试图在我的应用中使用ng2-bootstrap。我按照angular-cli开始的说明进行操作。下面是我的app.module.ts和angular-cli.json文件。

当我尝试使用我的某个组件时，我会收到以下错误5次：

EXCEPTION：未捕获（在承诺中）：错误：模板解析错误：＆＃39;手风琴＆＃39;不是一个已知的元素： 1.如果＆＃39;手风琴＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃39;手风琴＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止此消息。

我错过了什么？我需要采取哪些步骤来整合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"
      ]

在App中使用ng2 bootstrap时出错

1 个答案: