[Solved] Angular Error: Fix the upstream dependency conflict, or retry this command with force or egacy-peer-deps

I am trying to install the "ngx-device-detector" package but I am getting the below error.

npm ERR! peer @angular/common@"^17.0.0" from ngx-device-detector@7.0.0
npm ERR! node_modules/ngx-device-detector
npm ERR!   ngx-device-detector@"^7.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/common@17.0.8
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^17.0.0" from ngx-device-detector@7.0.0
npm ERR!   node_modules/ngx-device-detector
npm ERR!     ngx-device-detector@"^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.

I tried the following:

npm i ngx-device-detector --force 
npm i ngx-device-detector --legacy-peer-deps

In development it is ok but it is still not working after deploying to Render.com.