Angular 4

时间:2018-04-13 15:33:36

标签: angular ng-bootstrap

我在控制台中收到错误并且无法使其正常工作。我目前正在使用带有Bootstrap的Angular 4。

我的前端开发人员本周末离开,因此无法理解/查找是否有任何其他文件要添加依赖项。我所知道的事实是;为了削减主页大小,bootstrap JS函数不会添加到主页。

这是第一行中的错误:

Uncaught Error: Template parse errors:
'ngb-carousel' is not a known element:
1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这是我的home.component.ts:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'angular-2-local-storage';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

import { AuthService } from '../../core/services/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [NgbCarouselConfig]
})
export class HomeComponent {
  title = 'Resume - Homepage';
  constructor(
    private authService: AuthService,
    private router: Router,
    public localStorageService: LocalStorageService,
    config: NgbCarouselConfig,
  ) {
    config.interval = 5000;
    config.wrap = true;
    config.keyboard = false;
  }
}

我的HTML:

<ngb-carousel>
  <ng-template ngbSlide>
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    <img src="../../../assets/img/daddy.jpg"/>
  </ng-template>
  <ng-template ngbSlide>
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <img src="../../../assets/img/daddy.jpg"/>
  </ng-template>
</ngb-carousel>

1 个答案:

答案 0 :(得分:1)

您是否在app.module中添加了NgbModule

在app.module文件导入中应该是这样的东西:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';