[英]Angular No module factory available for dependency type: ContextElementDependency
Running ng build
on my Angular 4 project give this error :在我的 Angular 4 项目上运行
ng build
会出现此错误:
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.我在 github 和 stackoverflow 上阅读了很多关于这个问题的 Q/A,但没有一个对我有帮助。
As the answers suggested i have removed webpack but this didn't help.正如答案所建议的那样,我已经删除了 webpack,但这并没有帮助。 Removed node_modules, removed webpack from package.json, run
npm install
, still didn't help.删除了 node_modules,从 package.json 中删除了 webpack,运行
npm install
,仍然没有帮助。 Cleaned cache of npm, removed webpack from package.json, run npm install
, still no result.清理 npm 的缓存,从 package.json 中删除 webpack,运行
npm install
,仍然没有结果。 And many other similar suggestions didn't help.许多其他类似的建议也无济于事。
When i remove webpack from package.json and run npm install
i get following:当我从 package.json 中删除 webpack 并运行
npm install
时,我得到以下信息:
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:当将 webpack 返回到 package.json 时,运行
npm install
然后运行npm list webpack
我得到以下结果:
+-- @angular/cli@1.4.7
| `-- webpack@3.6.0
`-- webpack@3.8.1
Here is package.json of the project:这是项目的 package.json:
{
"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.当我在其他机器上克隆这个 repo 时,运行
npm install
然后ng build
它没关系,工作正常,但在我的它给出了这个错误。 I've tried completely removing the repo from my machine, cloning from scratch and running npm install
and ng build
, still same error.我已经尝试从我的机器上完全删除 repo,从头开始克隆并运行
npm install
和ng build
,仍然是同样的错误。
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:如果有人遇到它,我为解决此问题而采取的步骤:
rm -R node_modules
(remove node_modules folder) rm -R node_modules
(删除 node_modules 文件夹)npm i -g webpack
npm i -g webpack-dev-server
package-lock.json
(if it's there)package-lock.json
(如果有的话)npm i
npm start
I still don't completely understand the reasons why this happened.我仍然不完全理解发生这种情况的原因。
Do npm ls webpack
做
npm ls webpack
If you see two versions of webpack
(under @angular/cli and the root node_modules), Then that is the problem.如果你看到两个版本的
webpack
(在@angular/cli 和根节点 node_modules 下),那就是问题所在。 Delete/Rename the webpack under @angular/cli
and in the .bin
folder of @angular/cli
.删除/重命名下的WebPack
@angular/cli
,并在.bin
的文件夹@angular/cli
。
Problem solved for me问题为我解决
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.
我一直试图删除我的 node_modules 目录,然后重新安装 webpack。 If i installed webpack locally or globally i would get the ContextElementDependency error.
如果我在本地或全局安装 webpack,我会收到 ContextElementDependency 错误。 If i uninstalled webpack i would get webpack not found.
如果我卸载了 webpack,我会找不到 webpack。 Long story short the problem for me was my package-lock.json file.
长话短说,我的问题是我的 package-lock.json 文件。 So i ran "rm package-lock.json && rm -R node_modules" and then i could successfully run "npm install" and "npm start".
所以我运行了“rm package-lock.json && rm -R node_modules”,然后我可以成功运行“npm install”和“npm start”。 Dont ask me why this works, but i hope this helps someone.
不要问我为什么这样做,但我希望这对某人有所帮助。
npm dedupe
- this will remove duplicate dependencies npm dedupe
- 这将删除重复的依赖项ng build
Hope this will be helpful!希望这会有所帮助!
I implemented the above solution of removing webpack, removing node_modules, and reinstalling. 我实现了上述删除Webpack,删除node_modules和重新安装的解决方案。 But then i am getting this Error: ** Please make sure it is in your tsconfig via the 'files' or 'include' property.** can anybody help me figure it out.
但是然后我得到了这个错误:**请确保通过'files'或'include'属性确保它在您的tsconfig中。**任何人都可以帮助我解决这个问题。 Thank you.
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.