Unable to initialise Swiper in angular2 using npm

Question

I am trying to use the swiper library in my angular2 + npm application but am having an error on build when trying to use it

The error is:

ERROR in vendor.95f9dda80938ded736ad.bundle.js from UglifyJs
Unexpected token: name (class_SwiperClass) [vendor.95f9dda80938ded736ad.bundle.js:16626,6]

I have included it in my package.json and am using it as follows in my component:

import Swiper from 'swiper/src/components/core/core-class';


  ngAfterViewInit() {
    let mySwiper : any = new Swiper('swiper-container', {
      autoplay: 1000,
      autoplayDisableOnInteraction : false,
      speed: 400,
      spaceBetween: 0,
      pagination : ".swiper-pagination"
    });
  }

My angular-cli configuration is as follows:

 {
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "prefix": "app",
      "styles": [
        "../node_modules/swiper/dist/css/swiper.css"
      ],
      "scripts": [
        "../node_modules/swiper/dist/js/swiper.js"
      ]
    }
  ]
}

Answer 1

I'm using Swiper in my app in this way:

1. You must install swiper with npm --> npm install swiper@3.4.2 --save
2. You must add in your agular-cli.json: "styles": ["../node_modules/swiper/dist/css/swiper.min.css" ], "scripts": ["../node_modules/swiper/dist/js/swiper.min.js"]
3. You must add in your typings.d.ts --> declare var Swiper: any;
4. Now in your component.ts remove import Swiper and your slider works! let me known!