Angular No module factory available for dependency type: ContextElementDependency

Question

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 ?

Answer 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.

Answer 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

Answer 3

So i was having this issue and it took me forever to figure out. I kept trying to delete my node_modules directory then reinstall webpack. If i installed webpack locally or globally i would get the ContextElementDependency error. If i uninstalled webpack i would get webpack not found. Long story short the problem for me was my package-lock.json file. So i ran "rm package-lock.json && rm -R node_modules" and then i could successfully run "npm install" and "npm start". Dont ask me why this works, but i hope this helps someone.