webpack - 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@angularhttp@angularhttp.es5.js
An error occured during the build:
Error: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (D:devworkspace
ep
ode_modules@angularcli
ode_moduleswebpacklibCompilation.js:213:21)
    at Compilation.processModuleDependencies (D:devworkspace
ep
ode_modules@angularcli
ode_moduleswebpacklibCompilation.js:202:8)
    at _this.buildModule.err (D:devworkspace
ep
ode_modules@angularcli
ode_moduleswebpacklibCompilation.js:350:14)
    at building.forEach.cb (D:devworkspace
ep
ode_modules@angularcli
ode_moduleswebpacklibCompilation.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:devworkspace
ep
ode_moduleshtml-webpack-pluginlibcompiler.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:devworkspace
ep
ode_moduleshtml-webpack-pluginindex.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/cli@1.4.7
| `-- webpack@3.6.0
`-- webpack@3.8.1

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.