Angular-cli: "No module factory available for dependency type: ContextElementDependency" after migrating an universal project to Angular 7

Created on 25 Dec 2018 · 15Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 7.1.4
Node: 9.4.0
OS: linux x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cdk                      6.4.7
@angular/flex-layout              7.0.0-beta.22
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.20.2

Repro steps

With this package.json I execute the ng serve command:

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/platform-server": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@ngrx/effects": "^7.0.0",
    "@ngrx/entity": "^7.0.0",
    "@ngrx/store": "^7.0.0",
    "@ngrx/store-devtools": "^7.0.0",
    "@nguniversal/common": "^7.0.2",
    "@nguniversal/express-engine": "^7.0.2",
    "@nguniversal/module-map-ngfactory-loader": "^7.0.2",
    "compression": "^1.7.3",
    "core-js": "^2.5.4",
    "domino": "^2.1.0",
    "negotiator": "^0.6.1",
    "ngrx-store-freeze": "^0.2.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "^7.1.4",
    "@angular/language-service": "^7.1.4",
    "@ngrx/schematics": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "express": "^4.16.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngx-i18nsupport": "^0.17.1",
    "protractor": "~5.4.0",
    "ts-loader": "^5.3.2",
    "ts-node": "^7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6",
    "webpack": "4.20.2",
    "webpack-bundle-analyzer": "2.9.2",
    "webpack-cli": "3.1.1"
  }
}

The log given by the failure

The error I have:

ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 13% building modules 31/31 modules 0 active✖ ｢wdm｣: Error: No module factory available for dependency type: ContextElementDependency
    at addDependency (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:671:12)
    at iterationOfArrayCallback (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:186:3)
    at addDependenciesBlock (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:689:5)
    at iterationOfArrayCallback (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:186:3)
    at addDependenciesBlock (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:692:5)
    at Compilation.processModuleDependencies (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:700:4)
    at afterBuild (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:832:15)
    at buildModule.err (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:876:11)
    at callback (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:613:5)
    at module.build.error (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:653:12)
    at resolveDependencies (/home/templth/myapp/node_modules/webpack/lib/ContextModule.js:282:4)
    at ContextModule.result.resolveDependencies (/home/templth/myapp/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:503:25)
    at ContextModule.build (/home/templth/myapp/node_modules/webpack/lib/ContextModule.js:203:8)
    at Compilation.buildModule (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:618:10)
    at factory.create (/home/templth/myapp/node_modules/webpack/lib/Compilation.js:859:14)
    at hooks.afterResolve.callAsync (/home/templth/myapp/node_modules/webpack/lib/ContextModuleFactory.js:163:16)
/home/templth/myapp/node_modules/neo-async/async.js:14
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/home/templth/myapp/node_modules/neo-async/async.js:14:11)
    at /home/templth/myapp/node_modules/neo-async/async.js:2813:7
    at process._tickCallback (internal/process/next_tick.js:150:11)

Desired functionality

Mention any other details that might be useful

Source

templth

Most helpful comment

I had this issue when upgrading from NG5 to NG7. What worked for me was to uninstall webpack (npm uninstall --save-dev webpack) and then run a "npm install --save-dev @angular-devkit/build-angular@latest". Doing this installs webpack as transitive dependency and ensures you only have one installed locally. I also upgraded to the latest Node version (10).

edwinquaihoi on 5 Jan 2019

👍51 ❤15 🎉11 👎1

All 15 comments

The issue here is that you might have multiple version of webpack installed. You should remove webpack from your package.json. As webpack is already a transitive dependency of @angular-devkit/build-angular and having multiple webpack versions might cause issues as the one mentioned above.

See https://github.com/angular/angular-cli/issues/6417#issuecomment-315708400

Closing as this seems to be caused by trying to install a different version of webpack than the one that @angular-devkit/build-angular depends on and is a duplicate of #6417.

You can check if you have multiple versions of webpack by doing npm ls webpack.

alan-agius4 on 25 Dec 2018

👍5

edwinquaihoi on 5 Jan 2019

👍51 ❤15 🎉11 👎1

edwinquaihoi that worked for me thanks.

JackConnor on 22 Feb 2019

👍1

@edwinquaihoi thanks

bilecikli on 24 Feb 2019

👍1

webpack is included in angular devDepencies . Just remove it will work. Because, we already have @angular-devkit/build-angular. it's duplicate make conflict

gnganapath on 4 Mar 2019

Thanks, @edwinquaihoi . This worked with Node v8.15.0

dreadnautxbuddha on 6 Mar 2019

👍1

@edwinquaihoi Thanks!! worked for me!

luchocab on 9 Apr 2019

@edwinquaihoi Thanks.

- npm uninstall --save-dev webpack

- npm install --save-dev @angular-devkit/build-angular@latest

_Work for me!_

gaikwadvaibhav on 9 May 2019

👍5

Thanks

ngnam on 4 Jun 2019

then run a "npm install --save-dev @angular-devkit/build-angular@latest".

Ok this one is correct, just not as for today.
Angular 8 is out this week, I'm on 7 currently, and I just found a question on SO answered 10 hours ago ( ...! ) saying you need to do

npm install --save-dev @angular-devkit/[email protected]

This version worked for me.