1

I created a jhipster application with angular as front end ui framework. The jhipster and node versions are given below.

jhipster: 7.9.3,
npm: '9.6.5',
node: '18.16.0',

now i want to add matrerial-ui for creating a responsive application. For that i ran the following command.

ng add @angular/material

but then i am getting the following error log.

i Using package manager: npm
√ Found compatible package version: @angular/material@7.0.0.
√ Package information loaded.

The package @angular/material@7.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angulartest@0.0.1-SNAPSHOT
npm ERR! Found: @angular/core@14.2.0
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"14.2.0" from the root project
npm ERR!   peer @angular/core@">=7.0.0" from @angular/material@7.0.0
npm ERR!   node_modules/@angular/material
npm ERR!     @angular/material@"7.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"16.1.2" from @angular/animations@16.1.2
npm ERR! node_modules/@angular/animations
npm ERR!   peer @angular/animations@">=7.0.0" from @angular/material@7.0.0
npm ERR!   node_modules/@angular/material
npm ERR!     @angular/material@"7.0.0" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\sanal\AppData\Local\npm-cache\_logs\2023-06-28T09_04_45_754Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\sanal\AppData\Local\npm-cache\_logs\2023-06-28T09_04_45_754Z-debug-0.log
× Packages installation failed, see above.

i tried unning "ng add @angular/material --legacy-peer-deps" also. but it is also not working.

I tried upgrading angular cli and core. bot of those times I got the following error.

>ng update @angular/core
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 16.1.1 to perform the update.
√ Packages successfully installed.
Using package manager: npm
Collecting installed dependencies...
Found 59 dependencies.
Fetching dependency metadata from registry...
Updating multiple major versions of '@angular/core' at once is not supported. Please migrate each major version individually.
Run 'ng update @angular/core@15' in your workspace directory to update to latest '15.x' version of '@angular/core'.

For more information about the update process, see https://update.angular.io/?v=14.0-15.0

What is the correct way to upgrade angular and install material-ui in jhipster project?

1 Answer 1

1

I was able to install the material UI after upgrading each dependency manually one by one. I used the following commands,

ng update @angular/cli@15 --force
ng update @angular/cli@16 --force
ng update @angular-builders/custom-webpack
ng update @angular-builders/jest
ng update @fortawesome/angular-fontawesome
ng update @ng-bootstrap/ng-bootstrap
ng update jest-preset-angular
ng update ngx-infinite-scroll
ng update ngx-webstorage
ng update ts-jest

(Note: you will be asked to commit the changes after each upgrade.)

If there is a simpler approach than this, please share.

After upgrading the angular, I got an issue with importing scss style sheet. I changed the path and used the relative path for the style sheets.

this Question explains the problem and has answers for it.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.