Issue: The module "Angular" cannot be found in the Swiper package, resulting in an "ionic2-calendar Error

I recently updated the package for my project

  • Utilizing Ionic and Angular to create applications for iOS and Android
  • Current versions: Ionic 7, Angular 16

Following a recommendation, I made the switch from 'ion-slides' to the Swiper.js library due to deprecation in version 6.0.0 and removal in v7.0.0.

The ion-slides feature has been deprecated and removed. It is advised to utilize the Swiper.js library directly instead.

To comply with this change, I upgraded to the latest version of swiper (version=9.3.2)

However, upon updating my package.json and running ionic build, an issue arose:

./node_modules/ionic2-calendar/fesm2020/ionic2-calendar.mjs:8:0-37 - Error: Module not 
found: Error: Package path ./angular is not exported from package 
/Users/admin/Projects/<name_project>/node_modules/swiper (see exports field in 
/Users/admin/Projects/<name_project>/node_modules/swiper/package.json)

After examining the contents of node_modules/swiper, I was unable to find the angular path as required by ionic2-calendar. The code within ionic2-calendar attempts to import swiper/angular:

import * as i3 from 'swiper/angular';
import { SwiperModule } from 'swiper/angular'

A reference on Stack Overflow implies that Swiper Version 9 lacks support for Angular, indicating a need to adapt to a new approach. While I have implemented these changes in my own codebase, third-party packages like ionic2-calendar may still be relying on the previous implementation.

Given this scenario, what would be the best course of action? Should I revert back to version 8 of Swiper?

angulartypescriptionic-frameworkswiper.jsionic2-calendar

Answer №1

I switched from Swiper version 9 to Version 8.4.7 and found it to be more suitable for my needs

The latest update of ionic2-calendar was made around the same time as the upgrade to Swiper version 9, so it seems like we may have to wait for a new update on ionic2-calendar in order to fully utilize the latest version of Swiper https://i.sstatic.net/x7Fut.png

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

Angular websocket failing to execute API post request

I am currently developing a demo application that involves making a POST API call. The main goal is to send a query via the POST API call and receive data from the API as a response. One key feature of this API is that it provides updated data every minute ...

angularwebsocket

The Angular data table is encountering an issue as the dataStream.pipe function is not recognized

I'm currently working on setting up a table using Angular data table, but I've run into an issue related to the dataSource. I'm seeing an error message that says "dataStream.pipe is not a function", and I'm having trouble resolving it. ...

jsonangularmaterial-design

Disabling the background shadow effect in Angular Material's Accordion

I successfully disabled the background shadow on the Angular Material Accordion in this demonstration by incorporating the following CSS rule: .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none !important; /* box-shadow: ...

cssangularsassangular-material

Guide to swapping out embedded objects within a TypeScript data structure

I am in need of modifying a TypeScript object by conducting a key search. It is important to note that the key may be repeated within the object, so I must ensure it belongs to the correct branch before making modifications to the corresponding object. To ...

typescript

Tips for properly typing action creators connected to properties in react-redux

Within our project, all action creators are structured in the following manner: export const actionCreatorFunctionName(arg1, arg2...) { return (dispatch: Dispatch, getStore: () => StoreState) => { // ... function logic ... dispat ...

reactjstypescriptreduxreact-redux

Excessive display of Typescript Alert causing unnecessary interruptions

Why is my button creating multiple alerts when clicked? When I click the Login Button for the first time, the alert shows once. But on clicking it again, the alert shows 2 times. Subsequent clicks increase the alert count accordingly. Furthermore, if I c ...

javascripthtmltypescript

Retrieve JSON Data in Angular 2

I've defined a model with the following structure: export class ExampleData{ id: string; url: string; } When I make a call to a service, it returns the JSON data shown below: [ { "id": "abc", "url": "/path/to/folder" }, { ...

angularweb-servicesobservable

What methods can I employ to trace anonymous functions within the Angular framework?

I'm curious about how to keep track of anonymous functions for performance purposes. Is there a way to determine which piece of code an anonymous function is associated with? Here's an example of my code: <button (click)="startTimeout()&q ...

angulartypescriptanonymous-function

The parameter type must be a string, but the argument can be a string, an array of strings, a ParsedQs object, or an array of ParsedQs objects

Still learning when it comes to handling errors. I encountered a (Type 'undefined' is not assignable to type 'string') error in my code Update: I added the entire page of code for better understanding of the issue. type AuthClient = C ...

node.jsstringtypescriptfirebase

Tips for effectively transmitting data while utilizing a declarative/reactive data access method with RxJS in Angular?

Angular typically follows a classic pattern for data access that looks like this: Traditional Data Access Pattern getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.productsUrl) .pipe( tap(data => consol ...

angulartypescriptrxjs

Implementing form validation in Angular2 without using the <form> tag

Is there a way to perform form validation in Angular 2 without using the typical form tag setup? For instance, I would like to set a required field below: <div class="form-group"> <label for="name">Name</label> <input type=" ...

angular

Can a form be submitted using ViewChild in Angular5?

Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved? I attempted to do this but was unsuccessful My Attempt: <form #form="ngForm" (submit)="submitForm(form)" novalidate> <input required type="text" #codeReques ...

angulartypescript

Navigational side menu in Ionic

I am having trouble removing an animation from my ionic app. The main issue is that I am not sure how to disable the side bar from opening when swiping on the screen. I only want the side bar to open when clicking the nav-icon, not when swiping on the pa ...

angularjsionic-frameworkionic2

Dropdown with no selected option

Having some trouble with the p-dropdown element in Angular5 and primeng library. Specifically, when dealing with a large entity called Consignment that has multiple fields, I notice that the selected values on several p-dropdown elements (in this case, the ...

angulardropdownprimeng

Techniques for adding data to an array using TypeScript

I am working on a project that involves creating a dynamic menu bar by fetching data from two different collections (supcat and cat) in order to combine them into a new array. However, I am encountering an issue with the push() method not working as expe ...

node.jsangularmongodbtypescriptarray-push

Choosing the correct key and handling parsing errors

As I work on converting a class component to TypeScript, I encountered an error while trying to implement one of my onChange methods. The error message stated: "Argument of type '{ [x: number]: any; }' is not assignable to parameter of type &ap ...

reactjstypescripttsx

What is the best way to sequence asynchronous functions in Angular?

In my software, I have incorporated two essential services and functions: The first one: fetchData() { return this.http.post(this.base_URL + "web_app/login/", JSON.stringify(this.login)) .subscribe(response=>{ this.access_token = response ...

angularhttpasynchronous

Swapping out the standard if/else logic for try/catch error

I'm facing a challenge in removing the then statements from this code snippet and replacing all catches with try/catch statements. I'm struggling to figure out how to handle the then statements. export class WelcomePageContribution implements IW ...

javascripttypescriptasynchronoustry-catch

Edge browser saves your most recent PDF viewing preferences

Within my Angular application, we have integrated a feature where users can view a PDF report downloaded via an API within an iFrame. .TS code: In the TypeScript code snippet provided, we are subscribing to the execution of the reportservice and handling ...

angulariframemicrosoft-edgepdf-viewer

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Programming Language: Typescript I am looking to combine the properties of two interfaces as the value of an indexable-type within a third interface. Interface 1: export interface Employee { id: string name: string } Interface 2: export interfa ...

javascripttypescriptinheritanceinterface