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

[born2net]

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]

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

[DennisSmolek]

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]

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

[isaacplmann]

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]

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

[stefannegele]

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]

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

[brockklein]

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]

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

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

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]

"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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Heya, see https://github.com/angular/angular-cli/issues/6417 for information about what causes this problem and how to fix it.

[ehdwns980416]

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]

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

[mariohmol]

i had to set a version for webpack https://github.com/angular/angular-cli/issues/9794#issuecomment-371909824

[bpqd]

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]

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[bot]]

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._}