angular-cli: Lazy loading module broken with " No module factory available for dependency type: ContextElementDependency"

fixed : npm uninstall --save-dev webpack sudo rm -R node_modules npm install i think its not lazy load problem also i got this only after implementing the universal

I did get this working

I deleted my package lock file delete node_modules remove any reference to webpack from my package.json npm install

Closing as this seems to be caused by trying to install a different version of webpack than the one that @angular/cli depends on. This is not supported. Please ensure you only have @angular/cli in package.json, and not webpack. You can check if you have multiple versions of webpack by doing npm ls webpack.

If removing webpack from your package.json doesn’t work for you:

In my case I just needed to update the following dependencies : “@angular-devkit/core”, “@angular-devkit/build-angular”, and “@angular-devkit/schematics” to the following version : “0.8.1”.

This way “@angular-devkit/build-angular” had the same version than the webpack specified in my package.json (4.18.0).

This means that if your run npm ls webpack and have multiple results, you don’t have to remove webpack from your project, you just need both versions to be the same.

Seems like this issue came back again

_                      _                 ____ _     ___

/ \ _ __ __ _ _ | | __ _ _ __ / | | | | / △ \ | ’ \ / _ | | | | |/ _ | '| | | | | | | / ___ | | | | (| | || | | (| | | | || | | | // __| ||_, |_,||_,|| _||| |___/ @angular/cli: 1.4.4 node: 8.2.1 os: darwin x64 @angular/animations: 4.4.4 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.4 @angular/compiler-cli: 4.4.4 @angular/language-service: 4.4.4

Error: No module factory available for dependency type: ContextElementDependency

@rudzikdawid I checked your example and it definitely has two versions of webpack installed:

$ npm ls webpack
angular4-material2@0.0.1 D:\sandbox\material2-start
+-- @angular/cli@1.2.3
| `-- webpack@2.4.1
`-- angular2gridster@0.6.3
  `-- webpack@2.7.0

Refer back to my earlier comment (https://github.com/angular/angular-cli/issues/6417#issuecomment-315708400) about how this is not supported.

@dzolnjan if it works in one environment and not another, it’s usually because your dependency set is differente. Maybe cache, maybe yarn.lock, maybe package-lock.json.

Just upgraded to latest Angular 6.1 and angular-cli 6.1.1 and I get this error

No module factory available for dependency type: ContextElementDependency

The most likely cause is a webpack version mismatch. Version 1.1 of the CLI uses 2.4.x.

@peterpeterparker, after fighting with this for hours, I tried your solution and it worked. I think the only difference with the others was rm package-lock.json Thanks!!! 😃

My solution is

npm un --save-dev @ngtools/webpack then add "@ngtools/webpack" : "^6.0.8",¬ to package.json I think it’s conflict on version on dev-package

Eventually I figured it out, but it’s been 11 days ago, @victorjatoba here is my current package.json

I’m sure there are packages here you don’t use, but this is the combination that I’m working with and it builds fine

"dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular2-csv": "0.2.5",
    "auth0-js": "^9.7.3",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "formdata-polyfill": "^3.0.11",
    "jquery": "^1.9.1",
    "lodash-es": "^4.17.10",
    "moment": "^2.22.2",
    "ngx-bootstrap": "^3.0.1",
    "ngx-cookie-service": "^1.0.10",
    "popper.js": "^1.14.3",
    "primeicons": "^1.0.0-beta.10",
    "primeng": "^6.1.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.1.1",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@auth0/angular-jwt": "^2.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash-es": "^4.17.1",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less": "^3.0.4",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }

When I run ng version I get this:

Node: 8.10.0
OS: win32 x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.1
@angular-devkit/build-angular     0.7.1
@angular-devkit/build-optimizer   0.7.1
@angular-devkit/build-webpack     0.7.1
@angular-devkit/core              0.7.1
@angular-devkit/schematics        0.7.1
@angular/cli                      6.1.1
@ngtools/webpack                  6.1.1
@schematics/angular               0.7.1
@schematics/update                0.7.1
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

I just ran into this while upgrading angular-cli to latest version:

Angular CLI: 6.1.1
Node: 9.1.0
OS: darwin x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.1
@angular-devkit/build-angular     0.7.1
@angular-devkit/build-optimizer   0.7.1
@angular-devkit/build-webpack     0.7.1
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.4.1
@angular/cli                      6.1.1
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.4.1
@angular/pwa                      0.6.8
@ngtools/webpack                  6.1.1
@schematics/angular               0.6.8
@schematics/update                0.7.1
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.2

I read the post about multiple versions of webpack but removing webpack from package.json gives “Cannot find module ‘webpack’” . Running npm ls webpack lists no webpack versions, not even under @angular-devkit. If I then install webpack , npm ls webpack lists two versions:

on doing ng build I get the following … it’s catch 22

npm WARN @angular-devkit/build-webpack@0.7.1 requires a peer of webpack@^4.6.0 but none is installed. You must install peer dependencies yourself.

finally I manually installed webpack@4.9.2 as specified by @angular-devkit/build-angular~0.7.1 , and then ng serve can run, but the first problem persists

As am I. I have confirmed that we only have a single Webpack version in our NPM and it is the one coming in with the Angular CLI.

Currently unable to do module lazy loading due to this issue.

webpack: 3.5.6 @angular/cli: 1.4.3 node: 8.1.0 @angular/core: 4.4.4 typescript: 2.3.0

@alexfung888 The team just recently added a new command flag that I find very welcome. What I do is add the flag in my package.json file like so:

"start": "ng serve -o --port 4800 --preserveSymlinks true",
"build": "ng build -e prod --preserveSymlinks true",

So for example - I currently have v1.2.0-beta.0 of the CLI installed globally. Then I git clone master and do an npm link of course like the documentation says then I npm link @angular/cli within my Angular project. Run npm start and most of the time you are good to go!