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

dherges commented 7 years ago

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

javahaxxor commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

victorjatoba commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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[bot] commented 5 years ago

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

angular / angular-cli