Angular No module factory available for dependency type: ContextElementDependency

Running ng build on my Angular 4 project give this error :

     14% building modules 40/46 modules 6 active ...es\@angular\http\@angular\http.es5.js
An error occured during the build:
Error: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (D:\dev\workspace\rep\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:213:21)
    at Compilation.processModuleDependencies (D:\dev\workspace\rep\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:202:8)
    at _this.buildModule.err (D:\dev\workspace\rep\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:350:14)
    at building.forEach.cb (D:\dev\workspace\rep\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:147:27)
    at Array.forEach (native)
    at callback 

I've read many Q/A on github & stackoverflow on this issue, but non of them helped me.

As the answers suggested i have removed webpack but this didn't help. Removed node_modules, removed webpack from package.json, run npm install, still didn't help. Cleaned cache of npm, removed webpack from package.json, run npm install, still no result. And many other similar suggestions didn't help.

When i remove webpack from package.json and run npm install i get following:

 Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Error: Cannot
 find module 'webpack/lib/node/NodeTemplatePlugin'
     at Function.Module._resolveFilename (module.js:469:15)
     at Function.Module._load (module.js:417:25)
     at Module.require (module.js:497:17)
     at require (internal/module.js:20:19)
     at Object.<anonymous> (D:\dev\workspace\rep\node_modules\html-webpack-plugin\lib\compiler.js:11:26)
     at Module._compile (module.js:570:32)
     at Object.Module._extensions..js (module.js:579:10)
     at Module.load (module.js:487:32)
     at tryModuleLoad (module.js:446:12)
     at Function.Module._load (module.js:438:3)
     at Module.require (module.js:497:17)
     at require (internal/module.js:20:19)
     at Object.<anonymous> (D:\dev\workspace\rep\node_modules\html-webpack-plugin\index.js:7:21)
     at Module._compile (module.js:570:32)
     at Object.Module._extensions..js (module.js:579:10)
     at Module.load (module.js:487:32)

When return webpack to package.json , run npm install and then run npm list webpack i get following result:

+-- @angular/[email protected]
| `-- [email protected]
`-- [email protected]

Here is package.json of the project:

{
  "name": "somename",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "url": "",
  "copyright": "somec",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.4.5",
    "@angular/compiler": "^4.4.5",
    "@angular/core": "^4.4.5",
    "@angular/forms": "^4.4.5",
    "@angular/http": "^4.4.5",
    "@angular/platform-browser": "^4.4.5",
    "@angular/platform-browser-dynamic": "^4.4.5",
    "@angular/router": "^4.4.5",
    "@angular/upgrade": "^4.4.5",
    "amazon-cognito-identity-js": "^1.21.0",
    "chart.js": "2.7.0",
    "core-js": "2.5.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "moment": "2.18.1",
    "ng2-charts": "1.6.0",
    "ngx-bootstrap": "1.9.3",
    "raw-loader": "^0.5.1",
    "rxjs": "5.4.3",
    "simple-line-icons": "^2.4.1",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.7",
    "@angular/compiler-cli": "^4.4.5",
    "@types/jasmine": "2.6.0",
    "@types/jquery": "^3.2.13",
    "@types/node": "8.0.28",
    "codelyzer": "3.2.0",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "protractor": "5.1.2",
    "sass-loader": "^6.0.6",
    "ts-node": "3.3.0",
    "tslint": "5.7.0",
    "typescript": "2.5.2",
    "webpack": "^3.6.0"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}

When i clone this repo on other machine , run npm install and then ng build it is okay, works alright, but on mine it gives this error. I've tried completely removing the repo from my machine, cloning from scratch and running npm install and ng build, still same error.

Can someone please tell what can be the reason of this behavior and how to fix it ?

Solution 1:

Steps I took to fix this problem in case if someone encounters it:

1. Package.json: remove webpack from DevDependencies
2. rm -R node_modules (remove node_modules folder)
3. npm i -g webpack
4. npm i -g webpack-dev-server
5. remove package-lock.json (if it's there)
6. npm i
7. npm start

I still don't completely understand the reasons why this happened.

Solution 2:

Do npm ls webpack

If you see two versions of webpack (under @angular/cli and the root node_modules), Then that is the problem. Delete/Rename the webpack under @angular/cli and in the .bin folder of @angular/cli.

Problem solved for me