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

Bug Report or Feature Request (mark with an x)

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

Versions.

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0-rc.0
node: 6.10.0
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0-rc.0
@angular/compiler-cli: 4.1.3
@angular/tsc-wrapped: 4.1.3

Repro steps.

Include a lazy loaded module in AppRoutingModule.

This doesn't happen with a fresh ng new <project> set-up. When adding "webpack": "^2.5.0" dependency, this breaks the build.

    "typescript": "~2.3.1",
    "webpack": "^2.5.0",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-dev-server": "^2.4.5",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^4.1.0"

A repro can be found here: dherges/ng-cli-lazy-loading-broken-6417. The change in package.json dependencies breaks the build.

The log given by the failure.

webpack: Compiling...
 40% building modules 1/2 modules 1 active ...ework\guide\app\app-routing.module.tsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21)
    at Compilation.processModuleDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8)
    at _this.buildModule.err (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:336:13)
    at building.forEach.cb (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27)
    at Array.forEach (native)
    at callback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13)
    at module.build (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11)
    at resolveDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:133:4)
    at ContextModule.result.resolveDependencies (<project>\node_modules\@ngtools\webpack\src\plugin.js:229:25)
    at ContextModule.build (<project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:103:8)
    at Compilation.buildModule (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10)
    at factoryCallback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:325:11)
    at <project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12
    at <project>\node_modules\tapable\lib\Tapable.js:204:11
    at done.then (<project>\node_modules\@ngtools\webpack\src\plugin.js:231:28)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 70% building modules 2/2 modules 0 active
 14% building modules 36/48 modules 12 active ...e_modules\rxjs\add\operator\filter.js<project>\node_modules\@angular\cli\node_modules\webpack\li
b\Compilation.js:265
                                if(_this.profile) {
                                        ^

TypeError: Cannot read property 'profile' of null
    at factoryCallback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:265:13)
    at factory (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:253:5)
    at applyPluginsAsyncWaterfall (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:99:14)
    at <project>\node_modules\tapable\lib\Tapable.js:204:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (<project>\node_modules\@angular\cli\node_modules\webpack\lib\CompatibilityPlugin.js
:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (<project>\node_modules\tapable\lib\Tapable.js:208:13)
    at resolver (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:74:11)
    at process.nextTick (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:205:8)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Desired functionality.

Lazy loading:

const routes: Routes = [
  {
    path: 'content',
    loadChildren: './+content/content.module#ContentModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Mention any other details that might be useful.

There are other related issues from the past #3793, #4246

34 Answers

✔️Accepted Answer

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

Other Answers:

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.

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.

More Issues: