Angular没有模块工厂可用于依赖项类型:ContextElementDependency [英] Angular No module factory available for dependency type: ContextElementDependency

问题描述

在Angular 4项目上运行ng build会出现此错误:

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 

我在github&上阅读了许多问答.关于这个问题的stackoverflow，但没有一个能帮助我.

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

作为答案，我已经删除了webpack，但这无济于事.删除了node_modules，从package.json中删除了webpack，运行npm install仍然没有帮助.清理了npm的缓存，从package.json中删除了webpack，运行npm install，仍然没有结果.其他许多类似的建议也无济于事.

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.

当我从package.json中删除webpack并运行npm install时，我得到以下提示:

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)

将webpack返回到package.json时，运行npm install然后运行npm list webpack，我得到以下结果:

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

这是项目的package.json:

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"
  }
}

当我在其他机器上克隆此仓库时，运行npm install然后运行ng build没关系，可以正常工作，但是在我的计算机上会出现此错误.我试图从计算机上完全删除存储库，从头开始克隆并运行npm install和ng build，仍然是相同的错误.

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 ?

推荐答案

为解决此问题，我采取了一些步骤，以防万一有人遇到该问题:

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

1. Package.json:从DevDependencies中删除Webpack
2. rm -R node_modules(删除node_modules文件夹)
3. npm i -g webpack
4. npm i -g webpack-dev-server
5. 删除package-lock.json(如果有的话)
6. npm i
7. npm start

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.

这篇关于Angular没有模块工厂可用于依赖项类型:ContextElementDependency的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！