Skip to content

build aot: Error: No module factory available for dependency type: ContextElementDependency #4246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
born2net opened this issue Jan 27, 2017 · 30 comments
Labels
needs: repro steps We cannot reproduce the issue with the information given

Comments

@born2net
Copy link

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

@born2net
Copy link
Author

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

@DennisSmolek
Copy link

I'm getting the same error from our codeship build. My local build is fine but it's throwing the same thing exactly. @born2net can you reopen this?

@born2net
Copy link
Author

born2net commented Feb 3, 2017

yes I can, if need to re-close let me know,
regards

@isaacplmann
Copy link

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.

@filipesilva
Copy link
Contributor

I'll need a simple repro to investigate this if someone has it.

@filipesilva filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Mar 13, 2017
@stefannegele
Copy link
Contributor

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.

@eladcandroid
Copy link

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

@brockklein
Copy link

Same as @LasTanzen. Received this error today after upgrading to CLI 1.0.0 (and Angular 4.0.0). Putting Webpack at ~2.2.0 fixed it for me.

@dancancro
Copy link

@filipesilva I'm having the problem in this one
https://github.com/dancancro/jhipster-sample-app-ng2/tree/newmodules

I tried changing to Webpack ~2.2.0 but that didn't do anything. I also tried removing Webpack from DevDependencies and got Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

It happens with ng build. I get a different problem with ng build --aot

// ♥ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 7.5.0
os: darwin x64
@angular/animations: 4.0.1
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0

@dancancro
Copy link

dancancro commented Apr 24, 2017

@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'

@filipesilva
Copy link
Contributor

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

@Max-Lev
Copy link

Max-Lev commented Jun 4, 2017

"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"typescript": "^2.3.4",
"zone.js": "^0.8.4"}
An error occured during the build:
Error: No module factory available for dependency type: ContextElementDependency.
Happens when trying to use LazyLoading!!!
const routes: Routes = [
{
path: '', component: HomeComponent
},
{
path: 'dashboard',
loadChildren: './../modules/dashboard/dashboard#DashboardModule'
},
{
path: '', redirectTo: '', pathMatch: 'full'
},
{
path: '**', redirectTo: ''
},

];
why???? T. F?

@Norbert1001001
Copy link

Norbert1001001 commented Jun 23, 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.

@eskinderg
Copy link

eskinderg commented Jun 26, 2017

I am having the same issue.
Everything works fine on my local machine.

but not on my travis build. when i use ng build for travis , it throws the following error

"Error: No module factory available for dependency type: ContextElementDependency at Compilation.addModuleDependencies"

node: 6.10.0
@angular/cli 1.1.3
webpack 2.6.1

@Norbert1001001
Copy link

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.

@eskinderg
Copy link

Everything is working fine on my local machine. The problem occurs when i try to build it on travis.
And from my understanding, i think travis recreates the node_modules folder on every build.

@eskinderg
Copy link

eskinderg commented Jun 27, 2017

Is it possible to reopen this issue.
please see my output on travis.
https://travis-ci.org/eskinderg/Angular2
Even though it is working on my local windows 10 machine, it's failing on travis and i could not figure out what.
Thanks.

@Exertive
Copy link

Exertive commented Jul 5, 2017

This issue should definitely remain open. I persistently get this error, with or without AOT compilation, following recent upgrades to Angular CLI and Webpack. Still sticking to Angular 2.4.6 prior to update to 4.0.0.

Error: No module factory available for dependency type: ContextElementDependency

@angular/cli: 1.2.0
node: 8.1.3
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/platform-server: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.2.0
@angular/compiler-cli: 2.4.6

Webpack: 3.0.0

@Exertive
Copy link

Exertive commented Jul 5, 2017

I forgot to mention that I have repeatedly cleaned and reinstalled node modules, tried global versus local installs of CLI and Webpack etc...

npm cache clean --force
rimraf -rf node_modules
npm install

My package.json was originally that provided by Angular Class with subsequent upgrades and additions.

David @ Exertive

@eskinderg
Copy link

I downgraded my local and global @angular/cli to 1.0.4,
Removed all the scripts in the packages.json file that were created during the ng enject process including webpack.config.json.
Removed node_moudles and ran npm install again and everything is now working fine.

Hope that helps.

@Halynsky
Copy link

Halynsky commented Jul 8, 2017

I have similar problem

Angular - 4.2.5
AngularCLI - 1.2.0
Webpack - 3.1.0

[ERROR]  12% building modules 21/28 modules 7 active ...de_modules\css-loader\lib\cs
 13% building modules 29/43 modules 14 active ...src\app\components\app.component.html
[ERROR] An error occured during the build:
[ERROR] Error: No module factory available for dependency type: ContextElementDependency
[ERROR]     at Compilation.addModuleDependencies (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21)
[ERROR]     at Compilation.processModuleDependencies (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8)
[ERROR]     at _this.buildModule.err (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:336:13)
[ERROR]     at building.forEach.cb (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27)
[ERROR]     at Array.forEach (native)
[ERROR]     at callback (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13)
[ERROR]     at module.build (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11)
[ERROR]     at resolveDependencies (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:133:4)
[ERROR]     at ContextModule.result.resolveDependencies (E:\WorkSpase\improver\browser\node_modules\@ngtools\webpack\src\plugin.js:229:25)
[ERROR]     at ContextModule.build (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:103:8)
[ERROR]     at Compilation.buildModule (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10)
[ERROR]     at factoryCallback (E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:325:11)
[ERROR]     at E:\WorkSpase\improver\browser\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12
[ERROR]     at E:\WorkSpase\improver\browser\node_modules\tapable\lib\Tapable.js:204:11
[ERROR]     at done.then (E:\WorkSpase\improver\browser\node_modules\@ngtools\webpack\src\plugin.js:231:28)
[ERROR]     at <anonymous>

@rudzikdawid
Copy link

same issue here

npm ls -g --depth=0

/usr/lib
├── [email protected]
└── [email protected]

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

@ChrisWorks
Copy link

We have the samme issue

We are runnning:

Node 8.1.4
Angular CLI 1.3.2

When I do a npm list webpack, I get:

--- @angular/[email protected]
[email protected]
[email protected]

My package.json looks like this:

"dependencies": {
"@angular/animations": "^4.3.4",
"@angular/common": "^4.1.0",
"@angular/compiler": "^4.1.0",
"@angular/core": "^4.1.0",
"@angular/forms": "^4.1.0",
"@angular/http": "^4.1.0",
"@angular/platform-browser": "^4.1.0",
"@angular/platform-browser-dynamic": "^4.1.0",
"@angular/router": "^4.1.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"@types/lodash": "^4.14.72",
"@types/moment": "^2.13.0",
"@types/socket.io-client": "^1.4.29",
"angular-progress-http": "^0.5.1",
"angular-svg-round-progressbar": "^1.1.0",
"angular2-moment": "^1.3.3",
"angular2-recaptcha": "^0.6.0",
"angular2-sails": "^0.2.8",
"bootstrap": "^3.3.7",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"ng2-charts": "^1.5.0",
"ng2-file-upload": "^1.2.1",
"ngx-bootstrap": "^2.0.0-beta.4",
"ngx-file-drop": "^1.0.10",
"ngx-popper": "^1.1.0",
"rxjs": "^5.1.0",
"socket.io-client": "^1.7.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.0.4",
"@angular/compiler-cli": "^4.1.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": ", ~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0",
"webpack": "^3.4.1"
}

We have tried uninstalling webpack, but then we get another error (cant find webpack issue).

Has anyone any ideas how to fix this?

@filipesilva
Copy link
Contributor

Heya, see #6417 for information about what causes this problem and how to fix it.

@ehdwns980416
Copy link

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~👍

@RubensTen
Copy link

I updated the angular cli to latest version and this working for me.
angular cli before
1.3.2
angular cli after
1.7.2

image

@mariohmol
Copy link

i had to set a version for webpack #9794 (comment)

@joleelu
Copy link

joleelu commented Jun 8, 2018

  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/

@KeyvanAghaie
Copy link

KeyvanAghaie commented Jun 11, 2019

  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/

your solution is not work for me :(

1- Update Angular cli
2- Update Node.js
3- Rm node_modules
4- npm i
5- ng build --prod --aot

but same error : Runtime compiler is not loaded

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests