How to avoid the npm error while installing new package to Angular application?

Question

I need to have an npm package to be installed for my Angular Application to update the date-time range picker. So I have decided to implement ng2-daterangepicker in my application. But I got an error while installing its package itself.

It is showing the error below:

PS C:\Users\Administrator\OneDrive\Documents\MIAL\mial-crm-frontend> npm I <package-name > --save

The below error and warning message is given by the compiler:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.       
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/architect@0.1102.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-angular@0.1102.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-optimizer@0.1102.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-webpack@0.1102.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@11.2.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@11.2.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular/cli@11.2.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@ngtools/webpack@11.2.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/angular@11.2.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/update@0.1102.15',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v16.16.0', npm: '8.11.0' }
npm WARN EBADENGINE }

removed 1 package, and audited 1488 packages in 20s

90 packages are looking for funding
  run `npm fund` for details

15 vulnerabilities (3 moderate, 12 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

• My npm version:

PS C:\Users\Administrator\OneDrive\Documents\MIAL\mial-crm-frontend> npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0

• The Angular version:

PS C:\Users\Administrator\OneDrive\Documents\MIAL\mial-crm-frontend> ng version

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.15
Node: 16.16.0
OS: win32 x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.15
@angular-devkit/build-angular   0.1102.15
@angular-devkit/core            11.2.15
@angular-devkit/schematics      11.2.15
@angular/cdk                    11.2.13
@angular/cli                    11.2.15
@schematics/angular             11.2.15
@schematics/update              0.1102.15
rxjs                            6.6.7
typescript                      4.1.6

So please help me to fix this issue.

Answer 1

Here is what the error tells you:

required: { node: '>= 10.13.0', npm: '^6.11.0 || ^7.5.6', yarn: '>= 1.13.0' },
current: { node: 'v16.16.0', npm: '8.11.0' }

It is required the node version to be equal or greater than 10.13, and your current node version is 16.16 which is fine .

But what doesn't correct is the npm version, the required version is either 6 or 7 max, but your npm version is 8, which is way pass the required version.

So the solution is to down grade the npm version in your machine. Read more about semver here