ngx-bootstrap CarouselModule not working

Question

I am trying to use carousel module in my angular2 application. here is my app.ts file.

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 { }

Bellow is my home.component.ts and home.component.html in which i am using the module

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 File

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

when I am running the code it throwing following error.

'slide' is not a known element: 1. If 'slide' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->]

Any help would be appriciated

Where did you declare HomeComponent? Consider importing CarouselModule there — yurzui, Jan 21 '18 at 16:36
that is declared in another module(EventModule) which i have imported in app.ts — Shailendra, Jan 21 '18 at 16:39
thanks @yurzui.. it works, but i am not getting why importing in rootmodule is not working — Shailendra, Jan 21 '18 at 16:42
You should read this answer https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module/39601837#39601837 or this https://stackoverflow.com/questions/43153370/why-lazy-loaded-module-has-to-import-commonmodule-angular-2 — yurzui, Jan 21 '18 at 16:43

score 1 · Answer 1 · answered Jan 21 '18 at 16:40

Change

From

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

To

import { CarouselModule } from 'ngx-bootstrap';

Because import { CarouselModule } from 'ngx-bootstrap/carousel'; does not work with system.js

also add it under EventModule imports. And import EventModule inside app.module.ts

Soy Diabs · Answer 2 · 2022-06-28T15:11:48.713

0

I don't know who through the same problem but here is the issue

in your homecomponnent.ts

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

and in your @component add this line

providers: [ { provide: CarouselConfig, useValue: { interval: 2500, noPause: true, showIndicators: true } } ] })

if you want to change the second of the slide you just need to change the interval number

edited Jun 28 '22 at 15:11

answered Jun 23 '22 at 15:46

Soy Diabs

122
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 27 '22 at 12:16

ngx-bootstrap CarouselModule not working

2 Answers2