Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

ng add @angular/material > error > then CRASH


Hi there! Following the documentation I'm trying to add angular material, but I'm getting this error:


ng add @angular/material --force

Skipping installation: Package already installed
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (2946 bytes)
â § Installing packages (npm)...npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: angular-in-memory-web-api@0.16.0
npm error Found: @angular/common@17.3.0
npm error node_modules/@angular/common
npm error @angular/common@"^17.0.8" from the root project
npm error peer @angular/common@"^17.0.0 || ^18.0.0" from @angular/cdk@17.3.0
npm error node_modules/@angular/cdk
npm error @angular/cdk@"^17.0.4" from the root project
npm error peer @angular/cdk@"17.3.0" from @angular/material@17.3.0
npm error node_modules/@angular/material
npm error @angular/material@"^17.0.4" from the root project
npm error 13 more (@angular/forms, @angular/material, ...)
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm error node_modules/angular-in-memory-web-api
npm error angular-in-memory-web-api@"^0.16.0" from the root project
npm error
npm error Conflicting peer dependency: @angular/common@16.2.12
npm error node_modules/@angular/common
npm error peer @angular/common@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm error node_modules/angular-in-memory-web-api
npm error angular-in-memory-web-api@"^0.16.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\sebas\AppData\Local\npm-cache\_logs\2024-05-21T08_53_42_890Z-eresolve-report.txt

npm error A complete log of this run can be found in: C:\Users\sebas\AppData\Local\npm-cache\_logs\2024-05-21T08_53_42_890Z-debug-0.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.



I have tried with this lines but the result is the same:
npm cache clean --force
npm install --force

So I started to update each dependency one by one:
npm install datatables.net@latest --force
npm install jasmine-core@last --force
npm install angular-datatables@latest -force

Finally, I was able to install angular material.
But the solution dosent work (ng serve), it has a lot of error in a lot of files:

datatableConfig: DataTables.Settings = {};
'DataTables' only refers to a type, but is being used as a namespace here

'DataTables' only refers to a type, but is being used as a namespace here.
@Input() datatableConfig: DataTables.Settings = {};

Parameter 'callback' implicitly has an 'any' type.
callback

Parameter 'data' implicitly has an 'any' type

And the list of errors go on...


I tried: npm install @types/datatables.net --save-dev
npm install jquery --save

But there are a lot of error in all parts of the project.

I'm sorry, I'm really frustrated with this solution. Each time that I want to use it, it has a lot of problems with the dependencies. I have 2 post more related to the dependencies.

I don't understand how it is viable. Even if I can make it work, updating the solution in a near future will be more complicated than my whole development.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


We offer services that seamlessly integrate with your desires and preferences. Lucknow Escorts Agency are designed to elevate your experience and redefine the standards of companionship. Join us as we unveil a world of possibilities, curated to ignite passion and leave an indelible mark on your journey with us.



Hi Sebastian Gariglio

Apologise for the inconvenience. This issue is similar to the one posted in the link below and is related to the Angular Datatable version update. In the meantime, please use the provided workaround.

https://devs.keenthemes.com/question/error-at-installing-metronic-angular-theme

We will release the fix in the upcoming updates. In the meantime, you can download from the following link:

https://drive.google.com/drive/folders/151pniANxTK4N5QD5lcI3kSfnDXCySJio?usp=sharing

Please feel free to reach out if you encounter any further difficulties or require assistance.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(