Angular No factory module for dependency type: ContextElementDependency

Running ng build in my Angular 4 project gives 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 read a lot of Q / A on github and stackoverflow on this issue, but none of them helped me.

As I said, I uninstalled webpack, but that did not help. Remote node_modules, removed webpack from package.json, run npm install , it still didn't help. Flushed npm cache, removed webpack from package.json, run npm install , still no result. And many other similar offers did not help.

When I remove webpack from package.json and run npm install , I get the 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 returning webpack to package.json, run npm install and then run npm list webpack to get the following result:

 +-- @angular/ cli@1.4.7 | `-- webpack@3.6.0 `-- webpack@3.8.1 

Here is the project .json package:

 { "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 another machine, run npm install , and then ng build is fine, it works fine, but in my opinion this gives this error. I tried to completely remove the repo from my machine, clone from scratch and run npm install and ng build , still the same error.

Can someone tell me what could be causing this behavior and how to fix it?

+5
source share
2 answers

The steps I took to fix this problem if someone encounters it:

  • Package.json: remove the web package from DevDependencies
  • rm -R node_modules (delete the node_modules folder)
  • npm i -g webpack
  • npm i -g webpack-dev-server
  • remove package-lock.json (if it is there)
  • npm i
  • npm start

However, I do not quite understand the reasons why this happened.

+16
source

Do npm ls webpack

If you see two versions of webpack (under @ angular / cli and root node_modules), then this is the problem. Delete / rename the web package under @angular/cli and into the .bin @angular/cli .

Problem solved for me

+2
source

Source: https://habr.com/ru/post/1272722/


All Articles