Encountering a dependency tree error while attempting to install generic-ui with npm

While attempting to add generic-ui to my Angular project using the command:

npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes

I encountered the following error :

$ npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1b141d0f161b08571b0a0a3a4a544a544a">[email protected]</a>
npm ERR! Found: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be8e4e6e6e4e5cbbab8a5baa5b8">[email protected]</a>
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"12.2.11" from @generic-ui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09e9788dd97829994b0c0dec1c6dec4">[email protected]</a>
npm ERR! node_modules/@generic-ui/ngx-grid
npm ERR!   @generic-ui/ngx-grid@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\PC\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\PC\AppData\Local\npm-cache\_logs\2022-02-10T20_30_51_751Z-debug-0.log

I have exhausted all options - updating npm, reinstalling Angular CLI, re-downloading and installing Node, running npm audit, among other attempts - but nothing has resolved the issue.

javascriptangulartypescript

Answer №1

It seems that you are attempting to add @angular/[email protected] to your project, but the module @generic-ui/[email protected] requires a package @angular/common@"12.2.11" which is not compatible yet.

According to ngx-grid's Github page, it states that the module is currently not compatible with Angular 13.

The highest supported version of Angular at this time is 12.2. We are actively working on making Gui libraries compatible with Angular 13.

https://github.com/generic-ui/generic-ui

For optimal functionality in your project, it is recommended to stick with Angular 12 until dependencies are updated for compatibility with Angular 13.

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

Retrieving information from an API and showcasing the resulting data in a data grid

An issue arose while attempting to retrieve data from an API and passing it to a DataGrid component. Here is an example of the data returned: { data: [{ type: 'PropertyDamage', id: '100', attributes: { ident ...

javascriptreactjs

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

My application keeps encountering this persistent error: extensions::uncaught_exception_handler:8 Error in event handler for runtime.onMessage: Attempt to use a destroyed view: detectChanges at ViewDestroyedException.BaseException [as constructor] (chrome ...

javascripttypescriptangular

Why is it necessary to use 'this.' to reference a function inside a Component in React?

class First extends React.Component{ handleClick(){ alert('handle click'); } render(){ return <div> <button onClick={this.handleClick}>click</button> </div>; } } Explo ...

javascriptnode.jsreactjsreact-native

Transform the array into several different arrays

Having some trouble manipulating this array to get it into the desired form. This is the initial array: const children = [ { type: 'span' }, { type: 'br' }, { type: 'span' }, { type: 'br' }, { type: ' ...

javascriptarrays

Check for the presence of a specific variable before using it as a dependency in useEffect. Only watch it if the variable

Here is the code snippet I'm currently working with: useEffect(() => { if (field[1].isActive === true) { handleMore(); } }, [field[1].text]); One issue I'm encountering is that sometimes the Field data does not come in the json-response, ...

javascriptreactjsreact-hooksuse-effect

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

javascripthtmlcssangulartypescript

"How can a link be created in the most nested node of jsTree to connect to a

I am currently utilizing within my asp.net mvc project. My objective is to create a tree structure where users can click on the deepest node and navigate through my site. Although the tree structure is functioning properly, I am unable to generate any li ...

javascriptjqueryasp.net-mvc-5jstree

Is there a substitute for the Javascript onchange event listener in CakePHP 3?

Having trouble with the javascript onchange event listener in cakephp3.7. I've got an e-commerce web app running smoothly on cakephp3.7. Now, I want to improve the sales submission form by dynamically loading extra fields based on the product category ...

javascriptajaxcakephponchangecakephp-3.7

MVC3 Razor failing to identify the endpoint for parsing

Let me explain my current objective: $(document).ready(function () { @if (ViewBag.VerifyIfLoggedIn) { $("#needlogin-popup").dialog({ modal: true, closeOnEscape: true, minHeight: 384, minWidth: 5 ...

javascriptasp.net-mvc-3razorconditional-statements

Making a Jquery Ajax Request in Real Time

Is there a way to make sure that the "Test Data" text is only displayed in the console after the book details are fully loaded into vm.books? I am trying to make a synchronous ajax call for this purpose. The code below is not producing the expected result ...

javascriptjqueryajax

Steps for TS to infer types on interfaces

Incorporated in my React application is an object that I devised. Within this object, there is the following definition for Props: type Props = { message: MessageTypes | MessageImgTypes; showTimeStamp: boolean; } If we assume that MessageTypes consists o ...

typescript

Next-Auth: What is the process for managing registration using an email and password credential provider?

How does the custom credential provider handle registration with email and password? My current [nextauth].js file looks like this: import NextAuth from 'next-auth' import Providers from 'next-auth/providers' import axios from 'ax ...

javascriptreactjsauthenticationnext.jsnext-auth

Traverse through a series of selected options in an AJAX call to

I am facing a dilemma with a multiple select item, as it allows me to choose and send multiple selected items via an ajax request for importing into my database. The challenge lies in looping through the array received from the POST request. Ajax Request ...

javascriptphpjqueryajax

Exporting JSON blend files in Three.js is causing an error that says "Cannot read property 'type' of undefined."

Trying to display the default 3D cube template from Blender v2.74 in Chrome browser, I exported it as json using the threejs v1.4.0 add-on and I'm using Three.js revision 71. Referencing the documentation at , I attempted to load this json model stor ...

javascriptjson3dthree.jsblender

Creating repeatable texture patterns in Three.js

Hello, I have developed a basic renderer for my 3D objects that are generated using PHP. While I am able to successfully render all the objects, I am facing some major issues with textures. Currently, the texture I am using is sized at 512x512 pixels. I ...

javascriptthree.js

Adding additional properties to Material UI shadows in Typescript is a simple process that can enhance the visual

https://i.stack.imgur.com/9aI0F.pngI'm currently attempting to modify the Material UI types for shadows, but encountering the following error when implementing it in my code. There is no element at index 25 in the tuple type Shadows of length 25. I&a ...

reactjstypescriptmaterial-ui

Having trouble retrieving the location property from an object obtained through an API request

Upon retrieving a task using its id after scanning a barcode, I successfully obtain the id and the data associated with the task. However, I am encountering an issue where I am unable to properly utilize the setLocation function with the resultData. When I ...

javascriptreactjs

How can Protractor find elements using non-HTML custom attributes?

When running e2e tests on my Angular project using Selenium WebDriver and Protractor, I encountered an issue with locating elements that have custom attributes. For example, I have an element like: <div my-directive my-unique-id="abc123"></div> ...

javascripthtmlangularjsseleniumprotractor

Can a frame be preserved in THREE.Js?

Is there a way to save and playback animation frames in THREE.js? I'm not referring to video files, but rather the actual frames used in requestAnimationFrame(renderFunction). ...

javascriptthree.js