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

[dherges]

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

[dherges]

More observations:

1. I copied over working code from a fresh ng new <project> and it caused the above error.
2. 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": {}
  }
}

[filipesilva]

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

[clydin]

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

[dherges]

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

[filipesilva]

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

[jwuliger]

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.

[dherges]

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

[filipesilva]

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

[wnabil]

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

[alexfung888]

I uninstalled webpack 2.6.0 and installed 2.4.1. Still crashing in the same way.

[alexfung888]

and ng serve works fine after I I changed the lazy loaded module to eager loaded.

[jwuliger]

@alexfung888 Have you tried to use the master branch of the CLI via NPM linking? Changes have been made since the latest official release.

[alexfung888]

@jwuliger No I haven't. How do I do that? I only npm install @latest.

[jwuliger]

@alexfung888 Try this from the readme: https://github.com/angular/angular-cli#development-hints-for-working-on-angular-cli

[alexfung888]

@jwuliger Thanks for the reference, but how do I revert the global and local npm link after I am done? How do I get back to the normal released version?

Do I just manually delete the symbolic links created, and re-do the regular npm install?

[jwuliger]

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

[alexfung888]

You are right. It no longer crashes with lazy loading modules after I installed the master branch of angular/cli (3983565).

[jwuliger]

@alexfung888 Great! I am glad its working for you. I know its a work-around but at least we know its not permanent.

[alexfung888]

What is weird is that after trying the master branch, I check out 120beta0, it didn't crash, and then 110release, it didn't crash either!
So I did the obvious. I unlink it and re-installing 110 via npm. It still doesn't crash...
so mysterious

[vangorra]

Was experiencing this issue on travis where the yarn version is 0.17.x. I updated the travis config to install and use 0.24.6. Builds are working fine now.

[filipesilva]

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.

[filipesilva]

This keeps being a problem so I took another stab at preventing this class of error altogether. #11152 will hopefully make it a non-issue.

[j1myx]

RESUELTO

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

[MoneyRotten]

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

[duayres]

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.

[javahaxxor]

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

[sgentile]

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

[javahaxxor]

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

[victorjatoba]

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?

[sgentile]

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

[glemiere]

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.

[NDMCreative]

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

[angular-automatic-lock-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.}