Problems by setting up the angular2-useful-swiper module

2
votes

I have followed all the instructions on github from angular-useful-swiper to add this module into my angular2 project. I am using angular-cli! I installed the Module via npm into my node_modules

I added the SwiperModule into my app.module.ts

import { SwiperModule } from '../../node_modules/angular2-useful-swiper/lib/swiper.module';

and of course

.......
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    SwiperModule
  ],
......

I create a component for the swiper

import { Component, OnInit } from '@angular/core';

declare var Swiper: any;

@Component({
  selector: 'app-swiper',
  templateUrl: './swiper.component.html',
  styleUrls: ['./swiper.component.css']
})
export class SwiperComponent implements OnInit {

 config: Object = {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30
        };

  constructor() { }

  ngOnInit() {
  }

}

The HTML for ths component:

<swiper [config]="config">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </swiper>

If I call the swiper component I get the following error.

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./SwiperComponent class SwiperComponent - inline template:0:0 caused by: Swiper is not defined Error: Error in ./SwiperComponent class SwiperComponent - inline template:0:0 caused by: Swiper is not defined at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7204:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:30450:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:30515:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:61293:16) at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:83384:23) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83357:18) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) at CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:204:20) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) at CompiledTemplate.proxyViewClass.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) at ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:62220:20)

It makes no sense for me because the swiper module is there since I've added in app.module.ts

I am using angular-cli, to compile the app

Is there some one here which could give me a hint.

The module is in my node_modules and at the setup there is no error when I import the module. I did not register the swiper.js in the index.html in my opionon it is no need for because I added the module via npm and added the module in app.module.ts. If I am wrong I would be very happy if some one could give me a hand.

2
javascriptangular

2 Answers

3
votes

Adding the following to my index.html file solved it for me

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>

0
votes

The app.module.ts:

...
import { SwiperModule } from 'angular2-useful-swiper';
...

@NgModule({
    imports: [ 
        ...
        SwiperModule
    ],
    ...
})
export class AppModule {}

The swiper.component.ts file:

import { Component } from '@angular/core';
import { SwiperComponent } from 'angular2-useful-swiper';

@Component({
    selector: 'app-swiper',
    templateUrl: './swiper.component.html',
    styleUrls: ['./swiper.component.css']
})
export class SwiperComponent {
    public images: Array<string> = [
        'https://picsum.photos/700/250/?image=10',
        'https://picsum.photos/700/250/?image=11',
        'https://picsum.photos/700/250/?image=12',
        'https://picsum.photos/700/250/?image=13',
        'https://picsum.photos/700/250/?image=14'
    ];
    public config: Object = {
        loop: true,
        paginationClickable: true,
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 16,
        zoom: true,
    };
    @ViewChild('usefulSwiper') public usefulSwiper: SwiperComponent;
}

The swiper.component.html file:

<section class="swiper-container">
    <swiper class="swiper" [config]="config">
        <div class="swiper-wrapper">
            <div *ngFor="let image of images" class="swiper-slide">
                <img [src]="image" alt="image">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </swiper>
</section>