2

I am trying to implement Swiper in my Angular 8 application: https://swiperjs.com/get-started/.

I have created a javascript file in my assets folder and included it into my angular.json.

Also I have included Swiper in my app.module.ts and ran the command npm install @types/swiper.

However, I get the error:

[ts] Module '"../node_modules/@types/swiper/index has no exported member 'Swiper'

when it clearly does. I am not sure where I am going wrong.

card-swipe.component.ts

import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';



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


constructor() { }
something;
index;
config: SwiperConfigInterface = {
  a11y: true,
  direction: 'horizontal',
  slidesPerView: 3,
  slideToClickedSlide: true,
  mousewheel: true,
  scrollbar: false,
  watchSlidesProgress: true,
  navigation: true,
  keyboard: true,
  pagination: false,
  centeredSlides: true,
  loop: true,
  roundLengths: true,
  slidesOffsetBefore: 100,
  slidesOffsetAfter: 100,
  spaceBetween: 50,
  breakpoints: {
      // when window width is >= 320px
      320: {
          slidesPerView: 1
      }
  }
};

ngOnInit() {}

}

card-swipe.component.html

<p>Hi this works</p>
<!-- Slider main container -->
<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
    <div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
          <p>hi</p>
          <h1>hello</h1>
        </div>
    </div>
</swiper>
Jonathan
  • 441
  • 1
  • 9
  • 28

1 Answers1

7

We're using Swiper in our Angular application.

How we integrated it: There's an npm package specificatlly for Angular: https://www.npmjs.com/package/ngx-swiper-wrapper

So you basically just have to install the package:

npm i ngx-swiper-wrapper

Then, import the module (we've put that into our SharedModule and exported it, so that it's accessable from everywhere:

imports: [
    // more imports here
    SwiperModule
]

and then you can use it in your components like this:

<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
    <div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
            <!-- Your content goes here -->
        </div>
    </div>
</swiper>

As a config you can have something like this:

    config: SwiperConfigInterface = {
        a11y: true,
        direction: 'horizontal',
        slidesPerView: 3,
        slideToClickedSlide: true,
        mousewheel: true,
        scrollbar: false,
        watchSlidesProgress: true,
        navigation: true,
        keyboard: true,
        pagination: false,
        centeredSlides: true,
        loop: true,
        roundLengths: true,
        slidesOffsetBefore: 100,
        slidesOffsetAfter: 100,
        spaceBetween: 50,
        breakpoints: {
            // when window width is >= 320px
            320: {
                slidesPerView: 1
            }
        }
    };

No need to include any styles in your angular.json file. They all come with that module you imported.

dave0688
  • 5,372
  • 7
  • 33
  • 64
  • It wont work because it cannot load an image `Error while trying to use the following icon from the Manifest: http://localhost:4200/assets/icons/icon-144x144.png (Download error or resource isn't a valid image)` – Jonathan Dec 27 '19 at 10:08
  • Are you sure that this error comes from the swiper implementation? I just checked my project and cannot find any image which is called like that. – dave0688 Dec 27 '19 at 10:12
  • Yeah I am not sure why I got that error... I still have a blank screen but I am debugging rn – Jonathan Dec 27 '19 at 10:14
  • What is your dev console saying? Your screen cannot be blank because of this image error. – dave0688 Dec 27 '19 at 10:14
  • I get no error from the console... and it’s not the whole screen just the code within the `` – Jonathan Dec 27 '19 at 10:16
  • Ah okey. Did you define some swiper config? I will update my answer to provide you with some default config – dave0688 Dec 27 '19 at 10:17
  • I imported **SwiperConfigInterface** from `ngx-swiper-wrapper` and incleded the configuration... but I still get no error from the console – Jonathan Dec 27 '19 at 10:22
  • Can you please post some more code in your thread? I need the HTML and the ts (only the relevant pieces) part to further debug. – dave0688 Dec 27 '19 at 10:24
  • Please doublecheck if all your variables are defined. I would assume that ```something``` is not defined for you in the ```*ngFor``` loop insider your `````` tag. You might want to set up your IDE so it warns you from not defined variables – dave0688 Dec 27 '19 at 10:30
  • Sorry I still get the same error... do I need to define a `onIndexChange($event)` method as well? – Jonathan Dec 27 '19 at 10:38
  • 1
    Well if you have it in your template, yes. If you don't need it, just delete this part: ```(indexChange)="onIndexChange($event)"``` – dave0688 Dec 27 '19 at 10:39
  • How do access to the directive methods? – poimsm2 Feb 13 '20 at 14:55
  • What do you mean? – dave0688 Feb 13 '20 at 16:35
  • I am facing the error for angular 8 An accessor cannot be declared in an ambient context. – Deepender Sharma Mar 04 '20 at 07:34
  • I am attempting to implement the Swiper library in my Angular app through its CDN but it been unsucessful. I was hoping you could help me out here: https://stackoverflow.com/questions/61021368/how-to-use-swiperjs-cdn-in-angular – felixo Apr 04 '20 at 08:25
  • Worked for me at first even with Angular 10 even when it show a warning saying it required Angular 9. – user3502488 Jul 26 '20 at 06:04