【问题标题】:Angular No module factory available for dependency type: ContextElementDependencyAngular 没有可用于依赖类型的模块工厂:ContextElementDependency
【发布时间】:2018-03-30 07:05:00
【问题描述】:

在我的 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 

我在 github 和 stackoverflow 上阅读了很多关于这个问题的 Q/A,但没有一个对我有帮助。

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

当我从 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)

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

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

这里是项目的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"
  }
}

当我在其他机器上克隆这个 repo 时,运行 npm install 然后运行 ​​ng build 没关系,工作正常,但在我的它给出了这个错误。我已经尝试从我的机​​器上完全删除 repo,从头开始克隆并运行 npm installng build,仍然是同样的错误。

谁能告诉我这种行为的原因以及如何解决它?

【问题讨论】:

    标签: angular webpack angular-cli


    【解决方案1】:

    如果有人遇到此问题,我采取了解决此问题的步骤:

    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

    我仍然不完全理解发生这种情况的原因。

    【讨论】:

    • 谢谢!大多数其他修复只涉及删除 node_modules 然后清除缓存并重新安装。看起来 webpack 的全局安装为我做了。
    • 对我来说,我现在得到Error: Cannot find module 'webpack'
    • 我遇到这个问题的次数越多,我就越想为这个答案投票...
    • 这个错误很蠢,但是很久没有人修复它,唯一的解决方法是全局安装webpack。
    • 当我删除node_modules并运行yarn install时也解决了。
    【解决方案2】:

    npm ls webpack

    如果您看到webpack 的两个版本(在@angular/cli 和根node_modules 下),那就是问题所在。删除/重命名@angular/cli 下和@angular/cli.bin 文件夹中的webpack。

    为我解决了问题

    【讨论】:

    • 但是如果你更新/重新安装 @angular/cli 你会再次遇到这个问题,因为它会再次安装 webpack
    • 这就是为什么你应该从开发依赖中删除 if 的原因。这样你就不会删除软件包只是为了重新安装它们
    • 这是我的问题。从 devDependencies 中删除并使用我的全局版本的 webpack 解决了这个问题。
    • @phacic 谢谢你。我不得不重命名这两个 webpack 引用以使其正常工作。但我仍然没有在我的开发依赖项中看到 webpack。它是如何以这种方式安装的,我如何确保下次更新不会重新安装它?顺便说一句,希望你还在。
    • 我只是从我的 package.json 中删除 web pack,删除 node_modules 文件夹并再次执行该过程,它对我有用。谢谢
    【解决方案3】:

    所以我遇到了这个问题,我花了很长时间才弄清楚。我一直试图删除我的 node_modules 目录,然后重新安装 webpack。如果我在本地或全局安装 webpack,我会收到 ContextElementDependency 错误。如果我卸载了 webpack,我会找不到 webpack。长话短说,我的问题是我的 package-lock.json 文件。所以我跑了 “rm package-lock.json && rm -R node_modules” 然后我可以成功运行“npm install”和“npm start”。 不要问我为什么会这样,但我希望这对某人有所帮助。

    【讨论】:

    • 谢谢。 package-lock.json 给我造成了问题
    猜你喜欢
    • 2019-05-08
    • 2018-07-25
    • 2020-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多