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.