Angular 14 now offers ngx-pinch-zoom for an enhanced zooming experience

Is it possible to add ngx-pinch-zoom to an Angular 14 project?

I encountered a peer dependency conflict when trying to install pinch-zoom with --legacy-peer-deps, which worked in the project but failed in the ci/cd pipeline due to the conflict.

I attempted to install both ngx-pinch-zoom and ngx-pinch-zoom-13, but it appears that there is no specific version of ngx-pinch-zoom for Angular 14. Am I overlooking something?

npm ERR! Found: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b0bcbebebcbd93e2e7fde2fde0">[email protected]</a>
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.1.0" from the root project
npm ERR!   peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187b7c7358292c3629362a">[email protected]</a>
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^14.1.2" from the root project
npm ERR!     peer @angular/cdk@"14.1.2" from @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a5a9bcadbaa1a9a488f9fce6f9e6fa">[email protected]</a>
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.1.1" from the root project
npm ERR!   7 more (@angular/forms, @angular/material, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"~13.2.1" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f29c958adf829b9c919adf889d9d9fdfc3c1b2c0dcc7dcc4">[email protected]</a>
npm ERR! node_modules/ngx-pinch-zoom-13
npm ERR!   ngx-pinch-zoom-13@"^2.5.6" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2919d9f9f9d9cb2c3c1dcc0dcc5">[email protected]</a>
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"~13.2.1" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a6afb0e5b8a1a6aba0e5b2a7a7a5e5f9fb88fae6fde6fe">[email protected]</a>
npm ERR!   node_modules/ngx-pinch-zoom-13
npm ERR!     ngx-pinch-zoom-13@"^2.5.6" from the root project
angulartypescriptnpmcicdpinchzoom

Answer №1

There seem to be two possible solutions in this scenario:

  • Make modifications to your ci/cd pipeline by including --legacy-peer-deps
  • Alternatively, you can choose to fork ngx-pinch-zoom, update it for compatibility with Angular 14, and then utilize your customized version (followed by submitting a pull request)

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 4: Prevent the HTML template of the parent component from being rendered in the

My component has the following routes: { path: ':id', component: ProjectDetailsComponent, children: [ {path: '', redirectTo: 'gathering', pathMatch: 'full'}, {path: ' ...

angularangular-ui-router

Is the child constantly updating due to a function call?

Having difficulty navigating the intricacies where a child keeps re-rendering due to passing a function from the parent, which in turn references an editor's value in draftjs. function Parent() { const [doSomethingValue, setDoSomethingValue] = Re ...

reactjstypescriptdraftjs

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

htmlangulartypescript

What is the best way to clear a form in a Next.js 13.4 component following a server action?

Currently, I am working on a component using next.js 13.4, typescript, and resend functionality. My code is functioning properly without clearing data from inputs, as it uses the "action" attribute which is commented out. However, I started incorporating ...

reactjstypescriptformsnext.jsnext.js13

Converting information from a model into individual variables

I'm a newcomer to typescript and angular, and I've been attempting to retrieve data from firebase using angularfire2. I want to assign this data to variables for use in other functions later on. I am accustomed to accessing object members using d ...

javascriptangulartypescriptfirebase

What are effective ways to bypass proxy configurations when setting up npm and its corresponding plugins?

I'm facing a challenge with the proxy settings on my machine as I am not authorized to make changes to them. Despite this, I have installed node.js. Is there a method to override proxy and https-proxy settings via code so I can successfully install np ...

node.jsnpmfrontendnpm-installnode-modules

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Here is a component I've been working on: export const DeviceModule = (props: Props) => { const [isTooltipVisible, changeTooltipVisibility] = useState(false) const deviceRef = useRef(null) useEffect(() => { if (deviceRef && dev ...

reactjstypescriptjestjsreact-hooksenzyme

Encountering the "Module not found" error message stating "Error: Unable to locate '@uidu/ckeditor5-tokenizr' when trying to import an npm package that I have just installed."

Recently, I added the package @uidu/ckeditor5-tokenizr to my project. It is located in node_modules/@uidu/ckeditor5-tokenizr. However, when trying to import it using import tokenizr from '@uidu/ckeditor5-tokenizr'; within my Vue Components secti ...

vue.jsnpmckeditor5

Using Angular 5 animations to add delays to lists

I'm struggling to figure out how to add a rotation animation to a list of images with a delay between each one. Currently, I can only achieve a global rotation effect but not the individual delays that I desire. The list trigger works for the initial ...

angularangular-animations

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: https://i.sstatic.net/JLlua.png However, it's currently showing up like this: https://i.sstatic.net/hHYUm.png I've been attempting t ...

angularhtmltwitter-bootstrapcss

The primary export is not a React Component on the specified page: "/"

Encountering an error while attempting to use compiled code from Typescript to Javascript with Next.js Error message: The default export is not a React Component in page: "/" Seeking assistance on how to resolve this issue. Any help would be greatly appr ...

reactjstypescriptnext.js

The Observable<ArrayBuffer> type does not have a property map

I encountered an issue while upgrading from Angular v4 to Angular v6. I was in the process of replacing Http and HttpModule with HttpClient and HttpClientModule. As a result, I imported HttpClient from @angular/common/http in a service to fetch results fro ...

angulartypescriptangular4-httpclientangular6

What is the best way to organize a redux state to meet these specific needs?

In managing a complex web application state, it is crucial to keep track of multiple elements such as selected items and display IDs. The application may house several instances of these "States" with only one being active at any given time. For instance, ...

angularreduxngrx

Implementing TypeScript with styled components using the 'as' prop

I am in the process of developing a design system, and I have created a Button component using React and styled-components. To ensure consistency, I want all my Link components to match the style and receive the same props as the Button. I am leveraging t ...

javascriptreactjstypescriptreact-router-domstyled-components

Angular 2 testing error: Unable to connect to 'ngModel' as it is not recognized as a valid property of 'input'

Currently, I am experimenting with angular2 two-way binding for the control input. Below is the issue that I encountered: An error occurred: Can't bind to 'ngModel' since it isn't a known property of 'input'. Contents of app. ...

testingangularangular-cliangular2-testing

Auth0 Angular - No routes found to match

I recently set up an angular application and integrated it with Auth0 by following two helpful tutorials: https://auth0.com/docs/quickstart/spa/angular2/01-login https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api Here is a brief overview o ...

javascriptangulartypescriptrxjsauth0

What is the method to acquire the firestore reference type in TypeScript?

Here is the code I am working with: import { DocumentReference } from '@firebase/firestore-types' export type Recipe = { author: string title: string ingredients: { quantity: number ingredient: DocumentReference["path"] ...

typescriptfirebasegoogle-cloud-firestorenext.js

Ionic 2 encountered an error: A non-empty string argument was anticipated

My goal is to show markers on a map using the stored postcode in JSON format. I have successfully accessed the lat and long values from the JSON data to display markers on the map. However, when I attempt to use the postcode, it fails and returns an erro ...

angulargoogle-mapsionic2

Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Enabling TypeScript "strict" mode with "noImplicitAny" causes this code to fail compilation. I am looking for guidance on how to properly declare and use Arrays indexed by Enum values. namespace CommandLineParser { enum States { sNoWhere, sSwitchValu ...

typescript

Generate a new data type based on the value of a single attribute within a collection of objects

Is there a way to extract a specific property of a combined type and generate a new type from it? Consider the following example: type Actions = | { type: "ADD_COLUMN"; newColumnIndex: number; column: SelectorColumnData; } | { type: ...

typescript