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 ?

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

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

Comments

[komron]

But in case if you update/reinstall @angular/cli you'll have this problem again because it will install webpack again

[phacic]

Thats why u should remove if from dev dependencies. This is so u don't remove packages just to reinstall them again

[Nayfin]

Thank you! Most other fixes just involved removing node_modules then clearing cache and reinstalling. Looks like the global install of webpack did it for me.

[ssmith]

This was my issue. Removing from devDependencies and using my global version of webpack solved the problem.

[William Lohan]

For me, I now get Error: Cannot find module 'webpack'

[Nie Selam]

@phacic thanks for this. I had to rename the two webpack references to get it working. But i still don't see webpack in my dev depedencies. How did it get installed that way and how do I make sure next update won't reinstall it back? Hope you are still around btw.

[Nandun]

the more i run in to this problem, the more i want to upvote this answer...

[Zhang Buzz]

This error is stupid, but for long long time nobody fix it, the only way to solve it is to install webpack globally.

[Machado]

Also resolved when I deleted the node_modules and ran yarn install.

[Neeraj]

This worked for me, instead of rm -R node_modules, i used rmdir /S /Q .\node_modules to remove the node_modules directory on Windows.

[Ezequiel]

I just remove web pack from my package.json, remove the node_modules folder and do the process again and it worked for me. Thanks

[Abdeali Chandanwala]

my gitbash used to get hang after doing this steps ... i restarted my PC - which might have refreshed the cache and then finally it ran as required - thanks

[Andrew Gray]

This was helpful. Something I found - you absolutely have to go through all of these steps, in order, to clear the error up. Even if a step in this seems unhelpful when you're reading through, it's not! All these are necessary.

[Prathvi Shetty]

Thank you. package-lock.json was causing the issues for me

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[KTM]

As suggested its the problem of two versions of webpack. So need to uninstall the version under package.json. Issue link if anyone encounters this problem: github.com/angular/universal-starter/issues/581