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

More observations:

I copied over working code from a fresh ng new <project> and it caused the above error.
Webpack build fails when it encounters the lazy-loaded module.

In +content/content.module.ts:

// @NgModule({ ... })
// export class ContentModule {}

Commenting-out gives ContentModule is not an NgModule error.

Commenting-in causes the above error.

ContentModule does work in a "fresh" app.

Here are dependencies in package.json and customized .angular-cli.json:

{
  ...
  "devDependencies": {
    "@angular/cli": "^1.1.0-rc.0",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/tsc-wrapped": "^4.1.3",
    "@types/jasmine": "^2.5.47",
    "@types/node": "^7.0.18",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "browser-sync": "^2.18.8",
    "chalk": "^1.1.3",
    "codelyzer": "^3.0.1",
    "conventional-changelog": "^1.1.3",
    "core-js": "^2.4.1",
    "cpx": "^1.5.0",
    "css-loader": "^0.28.1",
    "del": "^2.2.2",
    "dgeni": "^0.4.7",
    "dgeni-packages": "^0.19.0",
    "gray-matter": "^2.1.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-csso": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.2.0",
    "gulp-inline-ng2-template": "^4.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-svgmin": "^1.2.3",
    "gulp-svgstore": "^6.1.0",
    "gulp-util": "^3.0.8",
    "handlebars": "^4.0.8",
    "i": "^0.3.5",
    "istanbul-combine": "^0.3.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine-core": "^2.6.1",
    "jasmine-spec-reporter": "^4.1.0",
    "js-beautify": "^1.6.12",
    "js-yaml": "^3.8.3",
    "json-loader": "^0.5.4",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.1.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "markdown-it": "^8.3.1",
    "merge-stream": "^1.0.1",
    "minimist": "^1.2.0",
    "mkdirp": "^0.5.1",
    "mz": "^2.6.0",
    "node-sass": "^4.5.3",
    "protractor": "^5.1.1",
    "raw-loader": "^0.5.1",
    "rho": "^0.4.1",
    "rimraf": "^2.6.1",
    "rollup": "^0.41.6",
    "rollup-plugin-angular-inline": "^1.0.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "run-sequence": "^1.2.2",
    "sass-loader": "^6.0.5",
    "shelljs": "^0.7.7",
    "sorcery": "^0.10.0",
    "sort-object": "^3.0.2",
    "source-map-loader": "^0.2.1",
    "standard-version": "^4.0.0",
    "to-string-loader": "^1.1.5",
    "ts-api-guardian": "^0.2.1",
    "ts-helpers": "^1.1.2",
    "ts-node": "^3.0.4",
    "tslint": "^5.2.0",
    "typescript": "^2.3.2",
    "uglify-js": "^3.0.8",
    "vinyl-fs": "^2.4.4",
    "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"
  },
  "dependencies": {
    "@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",
    "@nice/nice-fluorine-icons": "^2.2.16",
    "angular2-markdown": "^1.6.0",
    "bootstrap": "4.0.0-alpha.6",
    "marked-extras": "^0.2.4",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.4"
  },
  "peerDependencies": {
    "@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",
    "@nice/nice-fluorine-icons": "^2.2.16",
    "bootstrap": "4.0.0-alpha.6",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.4"
  },
...
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "foobar"
  },
  "apps": [
    {
      "root": "guide",
      "outDir": "dist/guide",
      "assets": [
        "assets",
        "favicon.ico",
        "**/*.md",
        {
            "input": "../node_modules/@foo/bar-icons/dist/solution-with-combined-SVG",
            "glob": "**/*.svg",
            "output": "assets/icons"
        },
        {
            "input": "../node_modules/@foo/bar-icons/dist/vectors",
            "glob": "**/*.svg",
            "output": "assets/icons/icon_fluorine"
        }
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "ud",
      "styles": [
        "styles.scss",
        "styles.css",
        "styles.docs-api.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./e2e/protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "demo/tsconfig.app.json",
      "tslintConfig": "demo/tslint.json"
    },
    {
      "project": "demo/tsconfig.spec.json",
      "tslintConfig": "demo/tslint.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "tslintConfig": "demo/tslint.json"
    }
  ],
  "test": {
    "karma": {
      "config": "demo/karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Heya, can you put up a simple repro that shows this happening?

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

@clydin

@clydin yes, it's the version mismatch.

@filipesilva here's the repro: dherges/ng-cli-lazy-loading-broken-6417. The change in package.json dependencies breaks the build.

@dherges

@dherges I'm not sure there isn't anything we can do here, it seems like having two versions of webpack causes some odd interactions. Open to suggestions though.

@dherges

Hey guys. Just ran into this problem myself. @dherges and @filipesilva I was able to fix the problem by installing Webpack 2.6.0.

"webpack": "^2.6.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0"

Hope this helps.

@filipesilva

@filipesilva I've got no idea, tbh. Let's just keep it documented. If version bumping solves it, then I guess that's what most people should do and will do.

Is it something the webpack team is aware of? Does it help them? Looks like there's no related issue over at their GitHub project.

I don't know if they are aware but tbh I wouldn't expect multiple webpack deps to play well with each other.

feat(@ngtools/webpack): allow passing in the right ContextElementDepe…

RESUELTO

Lo resolví actualizando npm npm install -g npm@latest

The problem seems to be a mix of wrong webpack dependency and/or duplicated webpack (implicit dep).
I've done as @dockletinc suggested, and it worked for me.

PS: Also done a npm install -g npm@latest before.

@Angular-devkit

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

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

This one is closed, maybe you could open a new issue?

I'm getting this error using @angular/cli 6.0.8 and webpack 4.16.5 with ionic 4.

What do I need to do to use both of them together?

@victorjatoba

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

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.

For Ionic users this link will help https://noellh.com/blog/ionic-4-cannot-find-webpack/

Also ``npm ls @ngtools/webpack' `lets you find all versions of webpack installed

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

feat(@ngtools/webpack): allow passing in the right ContextElementDepe…

Navigation Menu

Repository navigation

Lazy loading module broken with " No module factory available for dependency type: ContextElementDependency" #6417

Bug Report or Feature Request (mark with an `x`)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

51 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Lazy loading module broken with " No module factory available for dependency type: ContextElementDependency" #6417

Description

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Activity

dherges commented on May 23, 2017

filipesilva commented on May 23, 2017

clydin commented on May 23, 2017

dherges commented on May 24, 2017

filipesilva commented on May 24, 2017

jwuliger commented on May 25, 2017

dherges commented on May 25, 2017

filipesilva commented on May 25, 2017

51 remaining items

j1myx commented on Jun 15, 2018

duayres commented on Jul 10, 2018

buratinodev commented on Jul 26, 2018

sgentile commented on Jul 27, 2018

buratinodev commented on Jul 27, 2018

victorjatoba commented on Aug 7, 2018

sgentile commented on Aug 7, 2018

glemiere commented on Sep 12, 2018

NDMCreative commented on Feb 19, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Bug Report or Feature Request (mark with an `x`)