ngx-bootstrap CarouselModule 不工作答案

【问题标题】：ngx-bootstrap CarouselModule not workingngx-bootstrap CarouselModule 不工作
【发布时间】：2018-01-21 16:35:12
【问题描述】：

我正在尝试在我的 angular2 应用程序中使用轮播模块。这是我的 app.ts 文件。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {CarouselModule}  from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.component';
import {AppRoutesModule} from './app.routes';
import { NavbarComponent } from './shared/components/navbar/navbar.component';

@NgModule({
  declarations: [
  AppComponent,
  NavbarComponent,
],
imports: [
  BrowserModule,
  AppRoutesModule,
  FormsModule,
  CarouselModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

下面是我使用模块的 home.component.ts 和 home.component.html

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

HTML 文件

<carousel>
  <slide>
    <img src="assets/images/wedding.jpg" alt="First slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/birthday.jpg" alt="Second slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/anniversary.jpg" alt="Third slide" style="display: block; width: 100%;">
  </slide>

当我运行代码时，它会抛出以下错误。

'slide' 不是已知元素： 1.如果'slide'是一个Angular组件，那么验证它是这个模块的一部分。 2. 要允许任何元素添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。 (" [错误->]

如有任何帮助，将不胜感激

【问题讨论】：

你在哪里声明了 HomeComponent？考虑在那里导入 CarouselModule
在我在 app.ts 中导入的另一个模块（EventModule）中声明
在 EventModule 中导入 CarouselModule 应该可以工作
感谢@yurzui .. 它有效，但我不明白为什么在 rootmodule 中导入不起作用
您应该阅读此答案stackoverflow.com/questions/39601784/… 或此stackoverflow.com/questions/43153370/…

标签： angular ngx-bootstrap

【解决方案1】：

改变

来自

import {CarouselModule}  from 'ngx-bootstrap/carousel';

到

import { CarouselModule } from 'ngx-bootstrap';

因为导入 { CarouselModule } from 'ngx-bootstrap/carousel'; 不适用于 system.js

还将它添加到 EventModule 导入项下。并在 app.module.ts 中导入 EventModule

【讨论】：