Angular Aucune fabrique de module disponible pour le type de dépendance : ContextElementDependency

Question

Running ng build sur mon projet Angular 4 donne cette erreur :

     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 

J'ai lu de nombreuses questions-réponses sur github et stackoverflow à ce sujet, mais aucune ne m'a aidé.

Comme les réponses l'ont suggéré, j'ai supprimé webpack mais cela n'a pas aidé. J'ai supprimé les node_modules, supprimé webpack du package.json, exécutez npm install n'a toujours pas aidé. J'ai nettoyé le cache de npm, supprimé webpack de package.json, exécuté npm install mais toujours pas de résultat. Et beaucoup d'autres suggestions similaires n'ont pas aidé.

Lorsque je supprime webpack de package.json et que j'exécute npm install Je reçois ce qui suit :

 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)

Quand on renvoie webpack à package.json , on exécute npm install et ensuite exécuter npm list webpack J'obtiens le résultat suivant :

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

Voici le package.json du projet :

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

Quand je clone ce repo sur une autre machine, je lance npm install et ensuite ng build il est correct, fonctionne bien, mais sur le mien il donne cette erreur. J'ai essayé de supprimer complètement le dépôt de ma machine, de cloner à partir de zéro et d'exécuter npm install y ng build toujours la même erreur.

Quelqu'un peut-il me dire quelle peut être la raison de ce comportement et comment le corriger ?

Answer 1

Les mesures que j'ai prises pour résoudre ce problème au cas où quelqu'un le rencontrerait :

1. Package.json : supprimer webpack des DevDependencies
2. rm -R node_modules (supprimer le dossier node_modules)
3. npm i -g webpack
4. npm i -g webpack-dev-server
5. supprimer package-lock.json (si elle est là)
6. npm i
7. npm start

Je ne comprends toujours pas complètement les raisons pour lesquelles cela s'est produit.

Answer 2

Faites npm ls webpack

Si vous voyez deux versions de webpack (sous @angular/cli et le Root node_modules), alors c'est le problème. Supprimez/Renommez le webpack sous @angular/cli et dans le .bin dossier de @angular/cli .

Problème résolu pour moi

Answer 3

J'ai eu ce problème et ça m'a pris une éternité pour le résoudre. J'essayais de supprimer mon répertoire node_modules puis de réinstaller webpack. Si j'installais webpack localement ou globalement, j'obtenais l'erreur ContextElementDependency. Si je désinstallais webpack, j'obtenais webpack non trouvé. Pour faire court, le problème pour moi était mon fichier package-lock.json. J'ai donc lancé "rm package-lock.json && rm -R node_modules" et j'ai pu lancer avec succès "npm install" et "npm start". Ne me demandez pas pourquoi cela fonctionne, mais j'espère que cela aidera quelqu'un.