angular-cli: build aot: Error: No module factory available for dependency type: ContextElementDependency

OS?

angular-cli: 1.0.0-beta.26
node: 6.9.4
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/language-service: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.2.1
@angular/compiler-cli: 2.4.5

Repro steps.

Repo: https://github.com/born2net/studioweb

The log given by the failure.

Trying to ng build aot

dump:

$ ng build --aot
 25% building modules 128/230 modules 102 active ...modules\@angular\core\src\metadata.js
An error occured during the build:
Error: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:186:21)
    at Compilation.processModuleDependencies (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:175:8)
    at _this.buildModule.err (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:315:13)
    at building.forEach.cb (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:125:27)
    at Array.forEach (native)
    at callback (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:125:13)
    at module.build (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:147:11)
    at ContextModule.<anonymous> (C:\msweb\studioweb\node_modules\webpack\lib\ContextModule.js:118:3)
    at ContextModule.result.resolveDependencies (C:\msweb\angular-cli\packages\@ngtools\webpack\src\plugin.ts:195:25)
    at ContextModule.build (C:\msweb\studioweb\node_modules\webpack\lib\ContextModule.js:99:7)
    at Compilation.buildModule (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:127:10)
    at factoryCallback (C:\msweb\studioweb\node_modules\webpack\lib\Compilation.js:304:11)

seems the entire stack is from Webpack and no ref to any part of my code

Regards,

Sean

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 7
  • Comments: 30 (4 by maintainers)

Most upvoted comments

I had the issue because i manually installed webpack so i had webpack2.3.1 for a different process in the project and was able to fix it by using webpack~2.2.0. Hope that helps.

+11
stefannegele on Mar 23, 2017

@LasTanzen Thanks for the great tip! I just removed webpack from the DevDependencies and it works

+10
eladcandroid on Mar 28, 2017

Try reinstalling webpack. It worked for me. It seems it has some issues building factories for new components sometimes and needs to be reinstalled. So I did:

  • npm uninstall --save-dev webpack
  • rm -rf node_modules
  • npm cache clean
  • npm install And after than I didn’t get the issue anymore.

Hope it helps.

+7
Norbert1001001 on Jun 27, 2017
  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

Reference：http://dxtright.com/index.php/2017/12/05/angular-no-module-factory-available-dependency-type-contextelementdependency/

+3
joleelu on Jun 12, 2018

same issue here

npm ls -g --depth=0

/usr/lib
├── asar@0.13.0
└── npm@3.10.10

package.json:

  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/flex-layout": "angular/flex-layout-builds",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "angular/material2-builds",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/platform-server": "^4.3.0",
    "@angular/router": "^4.3.0",
    "angular2gridster": "^0.6.3",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.3",
    "@angular/compiler-cli": "^4.3.0",
    "@types/jasmine": "2.5.46",
    "@types/node": "~7.0.12",
    "codelyzer": "~3.0.1",
    "simple-git": "^1.69.0",
    "simple-terminal-menu": "^1.1.3",
    "ts-node": "~3.0.4",
    "tslint": "^5.3.2",
    "typescript": "^2.4.1"
  }

ng serve

12% building modules 17/29 modules 12 active ...art/node_modules/zone.js/dist/zone.jsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:206:21)
    at Compilation.processModuleDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:195:8)
    at _this.buildModule.err (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:336:13)
    at building.forEach.cb (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:27)
    at Array.forEach (native)
    at callback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:13)
    at module.build (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:167:11)
    at resolveDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:133:4)
    at ContextModule.result.resolveDependencies (/home/mike_oldfield/material2-start/node_modules/@ngtools/webpack/src/plugin.js:249:25)
    at ContextModule.build (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:103:8)
    at Compilation.buildModule (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:325:11)
    at /home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:12
    at /home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:250:11
    at done.then (/home/mike_oldfield/material2-start/node_modules/@ngtools/webpack/src/plugin.js:251:28)               13% building modules 29/36 modules 7 active ...terial2-start/node_modules/rxjs/Rx.js/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:265
                                if(_this.profile) {
                                        ^

TypeError: Cannot read property 'profile' of null
    at factoryCallback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:265:13)
    at factory (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:253:5)
    at applyPluginsAsyncWaterfall (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:99:14)
    at /home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:250:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:254:13)
    at resolver (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:74:11)
    at process.nextTick (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:205:8)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

source repository: https://github.com/rudzikdawid/material2-start

+3
rudzikdawid on Jul 22, 2017

I am running into this issue when trying to upgrade my angular project to universal using Everton Roberto Auler’s angular-cli-demo.

@angular/cli: 1.1.3 node: 6.10.0 os: linux x64 @angular/animations: 4.2.4 @angular/common: 4.2.4 @angular/compiler: 4.2.4 @angular/compiler-cli: 4.2.4 @angular/core: 4.2.4 @angular/forms: 4.2.4 @angular/http: 4.2.4 @angular/platform-browser: 4.2.4 @angular/platform-browser-dynamic: 4.2.4 @angular/platform-server: 4.2.4 @angular/router: 4.2.4 @angular/cli: 1.1.3

I am using webpack ~2.2.0 as you can see here and I have read above this problem was supposed to be obsolete due to recent changes in cli. “tslint”: “~4.5.0”, “typescript”: “~2.2.0”, “webpack”: “~2.2.0”, “webpack-node-externals”: “^1.5.4”

But when running “ng build && ngc && webpack” I get this error message: Error: No module factory available for dependency type: ContextElementDependency at Compilation.addModuleDependencies (/www/dev2/front-end/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:206:21)…

Thanks.

Edit: after digging more into the issue, it seems the template compiler don’t create ngfactory.ts files for some of my components. Can’t figure out why. It happens since webpack was installed.

+3
Norbert1001001 on Jun 23, 2017

I got this same error when I used yarn to install dependencies instead of npm install. Cleaning node modules and running npm install fixed the problem for me.

+2
isaacplmann on Feb 13, 2017

I had a problem when the @angular/cli module version I had was 1.3.0. All the problems were solved when I ran the npm i @angular/cli --save-dev command. Try this and Please write a comment~👍

+1
ehdwns980416 on Feb 16, 2018

@filipesilva Sorry I hadn’t seen your solution from the other issue. Changing

  imports: [RouterModule.forRoot(routes, { useHash: true })],

to

  imports: [RouterModule],

eliminated that error. I have other problems with routing so I can’t say for sure whether this has any bad consequences.

I had been getting this error:

ERROR Error: Uncaught (in promise): Error: Cannot find module './contact/contact.module'.

After making the above change, I am getting this one instead:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'module/contacts'
+1
dancancro on Apr 24, 2017

I cleared node_modules, rebuilt project and some clean ups and now gone, so closing, regards

+1
born2net on Jan 27, 2017
Read more comments on GitHub
← angular-cli: Build --watch failing on rebuild
angular-cli: Build error with 1.7.1 when using Angular Material →