Encountering issues with setting up Swiper in Angular2 using npm

I'm attempting to utilize the swiper library within my angular2 + npm application, but I'm encountering an error during the build process.

The specific error message is:

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

I have added the swiper package to my package.json and implemented it within my component like so:

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"
    });
  }

Below is a snippet of my angular-cli configuration:

 {
  "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 recently integrated Swiper into my app and here's the approach I took:

  1. First, swiper was installed using npm by running the command: npm install [email protected] --save
  2. The next step involved adding the following lines to agular-cli.json: "styles": ["../node_modules/swiper/dist/css/swiper.min.css" ], "scripts": ["../node_modules/swiper/dist/js/swiper.min.js"]
  3. In typings.d.ts file, it was necessary to include this declaration: declare var Swiper: any;
  4. Finally, in the component.ts file, the import statement for Swiper was removed to ensure the slider functionality worked smoothly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering how to retrieve the input value from the hidden input type within a loop using ngFor in Angular 10

I am new to using Angular and struggling with a seemingly simple issue. I have been stuck on this for a while and unable to find a solution. I have a form that includes a list of products, and I am trying to retrieve the ID value from a hidden input field ...

Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test. Currently, this is how I am attempting to achieve i ...

The component is failing to store its value within the database

I'm encountering an problem when attempting to save an option in the database. To address this issue, I created a component in Svelte called StatePicker that is responsible for saving US States. However, when I try to save it in the database using a ...

Generating numerous checkboxes dynamically

Seeking assistance with a jQuery function that dynamically generates or clones checkboxes. The challenge is to display the sub_item checkbox when the main_item checkbox is checked. For a demonstration, you can visit this DEMO Jquery $('#btnAdd' ...

Deciphering the meaning of the 'this' keyword in a prototype function of an object

var Controller = function () { try { throw new this.userException('test', 'test'); } catch (error) { if (error instanceof this.userException) { console.error(error.stack); } } } Controller.prototype.userExceptio ...

The variable being declared at the class level inside a function within the same class is not recognized

Seeking guidance on the code snippet I'm currently studying. I am implementing a TypeScript 1.8.10 compiler along with EM5: module myAmazingModule{ 'use strict'; export interface INavigateService { links: string[], ...

"An issue arises as the variable this.results.rulesFired is not properly

I am faced with a set of table rows <tr *ngFor="let firedRule of splitRules(results.rulesFired); let rowNumber = index" [class.added]="isAdd(firedRule)" [class.removed]="isRemove(firedRule)" ...

The nested jade elements are failing to render

If I have a jade setup with 3 files as follows: 1. //layout.jade doctype html html body block content 2. //index.jade extends layout block content h1 Animals block cat block dog 3. //animals.jade extends index block cat p Meow block ...

Using AngularJS to delete data with $http.delete and then reload the page using $window

I've encountered an interesting problem with the $http.delete() and $window.location.reload() functions. The issue arises when I call a delete method that triggers the $http.delete() function which, through a REST API interface, deletes data from a mo ...

Error [ERR_ASSERTION]: Requested handler for GET /test is missing or undefined

I am currently facing an issue with the controller function in my TypeScript code. Although the handler function is present in the controller file, it is still giving me an error. export const test = { options:{ handler: (request, reply) => { ...

Trigger an AJAX request by clicking a button using PHP

I've seen this question asked multiple times, but none of the answers seem to relate to my specific situation. I have a button that when clicked, should call a JavaScript function, passing it a PHP variable. The AJAX will then send that variable to a ...

Top method for patiently awaiting the completion of the .forEach() function

There are times when I find myself waiting for a .forEach() method to complete, especially in functions involving loaders. My current approach involves using the following code: $q.when(array.forEach(function(item){ //perform iteration })).then(func ...

Is there a way to access specific news details within my Ionic4 app?

I recently created an Ionic4 app that displays news fetched from Firebase Firestore on a specific page. However, I'm struggling with implementing a functionality where clicking on a news item will navigate to a details page showing more information ab ...

What are the steps for utilizing CSS Global Variables?

Hey there, thank you for taking the time to help me out. I'm having a simple doubt that I just can't seem to figure out. So... here's my '/pages/_app.js' file: import '../public/styles/global.css'; export default funct ...

Having trouble binding component property in VueJS with TypeScript?

Why is my component property not binding when I set the related component attribute to a value? Even when inspecting with Vue devtools or outputting the value into the HTML, it remains at the default value set on the component. I tried setting a string at ...

Using Dart with Angular2 to establish a two-way binding between a component boolean and a checkbox

Can anyone advise me on how to connect a standard checkbox within a template? <input type="checkbox"> to a boolean value in my component. Additional question: Alternatively, is there a method to achieve <input type="checkbox" {{mybool ? &apos ...

Utilizing Layerslider with clickable hyperlinks to open pop-up windows

I am using a layerslider plugin to display rotating sliders on my homepage. The sliders work as hyperlinks, and one of them should lead to a pop-up menu. However, the only class I can use is "ls-link", while the jQuery pop-up has its own class called "open ...

Updating dates using moment.js

Is there a way to adjust a date by adding 5 days and setting the hour, minute, and second to 0:0:0? For instance, taking a current date like 2016-03-13 21:21:21 and adjusting it to 2016-03-18 00:00:00. When attempting to achieve this using moment().add(5 ...

Angular2 route-driven themes

Exploring Different Themes for Two Routes: /books and /paintings Seeking a Solution to Include Specific Stylesheet Links in index.html For the /books route, I wish to include: <link rel="stylesheet" href="/assets/css/reading-theme.css" /> And for ...

Issue encountered when attempting to assign an action() to each individual component

I'm facing an issue with the button component I've created. import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` <ion-button color="{{color}}" (click)="action()"&g ...