Angular 2 UNMET PEER Dependency Error on Windows 10

Question

I am trying to run my web application on a Windows 10 Machine with the package.json (given below). I have Node version 5.6.0 and Npm version 3.6.0. But unfortunately it's always throwing an UNMET Peer Dependency Error and the following files of the AngularLoader Hierarchy fails to load when I run my project(powered by Laravel PHP): shim.js, zone.js, reflect.js, system.js. Contrary the same config runs absolutely smooth on a Linux Dev Machine. Any sort of help for installing the same on the Windows Machine will be highly appreciated as I am quite new to the Angular 2 Domain.

I have already tried the following: rm -rf node_modules/ npm cache clean npm install

And also installing like npm install angular/core angular/common angular-forms

P:S: Upgrading to Angular 4 is not an option. Sorry!!!

Here is my package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "@angular/common": "^2.1.2",
    "@angular/core": "^2.1.2",
    "@angular/forms": "^2.1.2",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.11",
    "@types/jquery": "^2.0.41",
    "jquery": "^3.2.1",
    "ng2-ui": "^0.11.5",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "^0.6.26"
  }
}

Here is the full install log of the Windows Machine:`

Link to Error Doc

Answer 1

If you use libraries that depend on Angular 4 you can expect these errors.

Take ng-bootstrap 1.0.0-alpha.25 for example; If you check the CHANGELOG.md file ;

BREAKING CHANGES
ng-bootstrap requires a minimal version of Angular 4.0.3

So why does this happen? Short answer; you should get rid of the version tags ^ and ~ as this is your problem to begin with:

"^1.0.0-alpha.11" allows for versions >= 1.0.0-alpha.11 < 2.0.0

use "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.11" instead.

I suggest you read up on npm semver

Some might say you do not have to drop it completely but I've had my fair share of issues. Not all developers understand semantic versioning it seems. Also, it's a very bad idea to use these wildcards with alpha and beta packages as they come with breaking changes by default it seems.

How to fix it from here?

You say you have a Linux Dev Machine where you can build this app without any issues. Try doing an npm shrinkwrap on that machine. This will write an npm-shrinkwrap.json file with all used library versions at that time. Then, when doing an npm install on the Windows 10 machine, this file will be checked to see what versions should be downloaded instead.