Angular 2 lazy loading compiling error

[stefanantic7]

I am trying to implement lazy loading. I am pretty sure that I put right path to VideoModule, but I still get an error on compiling.

Here is my AppModule where I define my routes and module I want to load lazily.

` import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component'; import {MenuComponent} from './menu/menu.component'; import {RouterModule} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {VideoModule} from './video/video.module';

@NgModule({ declarations: [ AppComponent, MenuComponent, HomeComponent, ], imports: [ BrowserModule, HttpModule, VideoModule, RouterModule.forRoot([ {path: '', component: HomeComponent}, {path: 'video', loadChildren: 'app/video/video.module#VideoModule'} ]) ] bootstrap: [AppComponent] }) export class AppModule { }`

and VideoModule

`import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {VideosComponent} from './videos/videos.component'; import {VideoPlayComponent} from './video-play/video-play.component'; import {NamePipe} from './name.pipe'; import {VideoFilterPipe} from './video-filter.pipe'; import {FormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {VideoPlayGuard} from './video-play.guard'; import {VideoService} from './video.service';

@NgModule({ imports: [ CommonModule, FormsModule, RouterModule.forChild([ {path: 'videos', component: VideosComponent} ]) ], declarations: [ VideosComponent, VideoPlayComponent, NamePipe, VideoFilterPipe ], providers: [ VideoPlayGuard, VideoService ] }) export class VideoModule { }`

Errors I get: 13% building modules 27/38 modules 11 active ...v\pfilter-web\node_modules\url\url.jsError: No module factory available for dependency type: ContextElementDependency at Compilation.addModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21) at Compilation.processModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8) at _this.buildModule.err (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:335:13) at building.forEach.cb (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27) at Array.forEach (native) at callback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13) at module.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11) at ContextModule.<anonymous> (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:118:3) at ContextModule.result.resolveDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:229:25) at ContextModule.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:99:7) at Compilation.buildModule (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10) at factoryCallback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:324:11) at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12 at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:204:11 at done.then (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:231:28) 14% building modules 38/42 modules 4 active ...angular\common\@angular\common.es5.jsC:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:264 if(_this.profile) { ^ TypeError: Cannot read property 'profile' of null at factoryCallback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:264:13) at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:242:4 at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:93:13 at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:204:11 at NormalModuleFactory.params.normalModuleFactory.plugin (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\CompatibilityPlugin.js:52:5) at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:208:13) at onDoneResolving (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:68:11) at onDoneResolving (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:189:6) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9)

Here is my repo: https://github.com/stefanantic7/pfilter Sorry for a lot of code, but I tried a lot of solution but it still does not work. I really do not know what else to do.

[mist3r3]

Same error for me. I'm still trying to fix this. I've deleted the node_modules and did npm install and it didn't work. I've reinstall globally angular/cli, it still didn't work... I've past the whole day on this and I still have the same bug :(. Keep me in touch if you find a solution, I'll do the same.

[stefanantic7]

I solved the problem. First open your package.json file and delete webpack from devDependencies, than delete node_module. After that run npm install ang npm start. Check this solution. Stay in touch :D

2017-05-10 12:19 GMT+02:00 mist3r3 notifications@github.com:

Same error for me. I'm still trying to fix this. I've deleted the node_modules and did npm install and it didn't work. I've reinstall globally angular/cli, it still didn't work... I've past the whole day on this and I still have the same bug :(. Keep me in touch if you find a solution, I'll do the same.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/6246#issuecomment-300439828, or mute the thread https://github.com/notifications/unsubscribe-auth/ATfmkZxXBJtCSdZhUpa0w62gn8Myrmr7ks5r4Y9IgaJpZM4NV5GE .

[mist3r3]

Still not working -_- I probably have some problem with all of my dependencies.

[stefanantic7]

You can push your code and give me link of repository I can check

On May 10, 2017 12:52, "mist3r3" notifications@github.com wrote:

Still not working -_- I probably have some problem with all of my dependencies.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/6246#issuecomment-300446521, or mute the thread https://github.com/notifications/unsubscribe-auth/ATfmkW4f3tvCB80xwRAf4L5CM6nRju8Vks5r4ZbcgaJpZM4NV5GE .

[mist3r3]

It's complicated to push my code right now ( doesn't belong to me) But I can copy the package.json.. I believe this is enough? { "name": "material", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "dependencies": { "@angular/animations": "^4.0.1", "@angular/cli": "^1.0.2", "@angular/common": "^4.1.1", "@angular/compiler": "^4.0.1", "@angular/core": "^4.1.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/material": "git+https://github.com/angular/material2-builds.git#06ce5b413dffed1eacd5f3574fc7b9ec7ba36bde", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/platform-server": "^4.0.1", "@angular/router": "^4.0.1", "@covalent/core": "^1.0.0-beta.3-2", "@covalent/dynamic-forms": "^1.0.0-beta.3-2", "@covalent/highlight": "^1.0.0-beta.3-2", "@covalent/http": "^1.0.0-beta.3-2", "@covalent/markdown": "^1.0.0-beta.3-2", "@ngtools/webpack": "^1.3.1", "@types/firebase": "^2.4.31", "angularfire2": "^4.0.0-rc.0", "core-js": "^2.4.1", "echarts": "^3.5.1", "firebase": "^3.9.0", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "jquery": "^3.2.1", "jquery-slimscroll": "^1.3.8", "mathjax": "^2.7.1", "ng2-ckeditor": "^1.1.6", "reflect-metadata": "^0.1.10", "rxjs": "^5.3.0", "uuid": "^3.0.1", "webfontloader": "^1.6.27", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.5", "zone.js": "^0.8.5" }, "devDependencies": { "@angular/cli": "^1.0.3", "@angular/common": "^4.1.1", "@angular/compiler": "^4.0.1", "@angular/compiler-cli": "^4.0.1", "@angular/core": "^4.1.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angularclass/hmr": "^1.2.2", "@angularclass/hmr-loader": "^3.0.2", "@ngtools/webpack": "^1.3.1", "@types/core-js": "^0.9.41", "@types/hammerjs": "^2.0.34", "@types/jasmine": "^2.5.47", "@types/jquery": "^2.0.41", "@types/node": "^7.0.12", "add-asset-html-webpack-plugin": "^1.0.2", "angular-router-loader": "^0.6.0", "angular2-template-loader": "^0.6.2", "autoprefixer": "^6.7.7", "awesome-typescript-loader": "^3.1.2", "bootstrap": "~4.0.0-alpha.6", "browser-sync": "^2.18.8", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "del": "^2.2.1", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-webpack-plugin": "^2.28.0", "json-loader": "^0.5.4", "ng-router-loader": "^2.1.0", "node-sass": "^4.5.2", "postcss-loader": "^1.3.3", "raw-loader": "^0.5.1", "rimraf": "^2.6.1", "sass-loader": "^6.0.3", "style-loader": "^0.16.1", "ts-helpers": "^1.1.2", "ts-node": "^3.0.2", "tslib": "^1.6.0", "tslint": "^5.0.0", "typescript": "^2.2.2", "yargs": "^7.0.2" }, "engines": { "node": ">=6.9.0", "npm": ">= 3" } }

[stefanantic7]

I do not know. But you have a lot devDependencies you dont need. Here is mine

{ "name": "pfilter-web", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.0.1", "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.2.0" }}

On May 10, 2017 12:58, "mist3r3" notifications@github.com wrote:

It's complicated to push my code right now ( doesn't belong to me) But I can copy the package.json.. I believe this is enough? { "name": "material", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "dependencies": { "@angular/animations": "^4.0.1", "@angular/cli": "^1.0.2", "@angular/common": "^4.1.1", "@angular/compiler": "^4.0.1", "@angular/core": "^4.1.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/material": "git+https://github.com/angular/material2-builds.git# 06ce5b413dffed1eacd5f3574fc7b9ec7ba36bde", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/platform-server": "^4.0.1", "@angular/router": "^4.0.1", "@covalent/core": "^1.0.0-beta.3-2", "@covalent/dynamic-forms": "^1.0.0-beta.3-2", "@covalent/highlight": "^1.0.0-beta.3-2", "@covalent/http": "^1.0.0-beta.3-2", "@covalent/markdown": "^1.0.0-beta.3-2", "@ngtools/webpack": "^1.3.1", "@types/firebase": "^2.4.31", "angularfire2": "^4.0.0-rc.0", "core-js": "^2.4.1", "echarts": "^3.5.1", "firebase": "^3.9.0", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "jquery": "^3.2.1", "jquery-slimscroll": "^1.3.8", "mathjax": "^2.7.1", "ng2-ckeditor": "^1.1.6", "reflect-metadata": "^0.1.10", "rxjs": "^5.3.0", "uuid": "^3.0.1", "webfontloader": "^1.6.27", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.5", "zone.js": "^0.8.5" }, "devDependencies": { "@angular/cli": "^1.0.3", "@angular/common": "^4.1.1", "@angular/compiler": "^4.0.1", "@angular/compiler-cli": "^4.0.1", "@angular/core": "^4.1.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angularclass/hmr": "^1.2.2", "@angularclass/hmr-loader": "^3.0.2", "@ngtools/webpack": "^1.3.1", "@types/core-js": "^0.9.41", "@types/hammerjs": "^2.0.34", "@types/jasmine": "^2.5.47", "@types/jquery": "^2.0.41", "@types/node": "^7.0.12", "add-asset-html-webpack-plugin": "^1.0.2", "angular-router-loader": "^0.6.0", "angular2-template-loader": "^0.6.2", "autoprefixer": "^6.7.7", "awesome-typescript-loader": "^3.1.2", "bootstrap": "~4.0.0-alpha.6", "browser-sync": "^2.18.8", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "del": "^2.2.1", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-webpack-plugin": "^2.28.0", "json-loader": "^0.5.4", "ng-router-loader": "^2.1.0", "node-sass": "^4.5.2", "postcss-loader": "^1.3.3", "raw-loader": "^0.5.1", "rimraf": "^2.6.1", "sass-loader": "^6.0.3", "style-loader": "^0.16.1", "ts-helpers": "^1.1.2", "ts-node": "^3.0.2", "tslib": "^1.6.0", "tslint": "^5.0.0", "typescript": "^2.2.2", "yargs": "^7.0.2" }, "engines": { "node": ">=6.9.0", "npm": ">= 3" } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/6246#issuecomment-300447745, or mute the thread https://github.com/notifications/unsubscribe-auth/ATfmkY6gYd4CrsXLFOa-Y5SQ21M6S3kiks5r4Zg_gaJpZM4NV5GE .

[filipesilva]

Heya all, this seemed to have been a problem with dependencies. I'd also like to mention that in the CLI the paths to lazy routes should be relative from the file you're in:

// wrong
loadChildren: 'app/video/video.module#VideoModule'
// right
loadChildren: './video/video.module#VideoModule'

[vilicvane]

@filipesilva Hi, I am experiencing a similar issue. The path is inside app.routes.ts and I have a structure like below:

- app
  - app
    - app.routes.ts
    - app.module.ts
    - views
      - not-found.module.ts

However, I have to use ./app/views/not-found/not-found.module#NotFoundModule to avoid error o module factory available for dependency type: ContextElementDependency.

But using this would result in:

ERROR in Could not resolve "./app/views/not-found/not-found.module" from "C:/Projects/makeflow-web/src/app/app/app.module.ts".
webpack: Failed to compile.

[luchillo17]

@vilic If it's a relative path it should be relative from the app.routes.ts file, have you tried with ./views/not-found.module#NotFoundModule instead?

[vilicvane]

@luchillo17 As I said I had to use './app/views/...' instead of './views/...' to avoid the very first error. So sadly yes, I have tried that with no luck.

[luchillo17]

Hmm, that's interesting, i've just tested with a new project by adding a lazy module, and it worked as intended, have you changed the project configs? (like using ng eject then messing with the webpack.config.js?)

[vilicvane]

@luchillo17 No, only .angular-cli.json, but with somewhat strange project structure:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "makeflow-web-app"
  },
  "apps": [
    {
      "root": "src/app",
      "outDir": "bld/app",
      "deployUrl": "app",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "mf",
      "styles": [
        "styles.less"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "lint": [
    {
      "project": "src/app/tsconfig.json"
    }
  ],
  "defaults": {
    "styleExt": "less",
    "component": {}
  }
}

[vilicvane]

Turns out to be usage of two different ContextElementDependency constructor references. One inside @angular/cli/node_modules/webpack and one under project root.

[montella1507]

@filipesilva due to https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

documentation, loadChildren is not in relative path format.

• your example is working with NO relative path: https://angular.io/resources/live-examples/ngmodule/ts/pre-shared.3.eplnkr.html

So this: https://github.com/angular/angular-cli/issues/6246#issuecomment-300462984

Is not right i think.

It worked with absolute path (loadChildren: 'app/dashboard/dashboard.module#DashboardModule' ..) till now.

Today, we have "Cannot load module app/dashboard/dashboard.module" after clean npm install

It looks it doesnt work only when we use -prod or (and) AOT build.

?

EDIT: ok i have resolved the issue: https://github.com/devyumao/angular2-busy/issues/55

[a616101]

@montella1507 How do you resolved ?

devyumao/angular2-busy#55

[montella1507]

@a616101 i removed that library - it is not usable at all for normal project, where are correct usages of Inputs. so

import {BusyModule}.. and imports: [BusyModule] was just forgotten code.

If you wanna use that library, use ultimate/aot-loader 0.1.16 aot+lazy load npm package

[Max-Lev]

Deleting webpack devDependencies from package,json solved this issue. Tnx alot stefanantic7!!! But, i want to use different webpack config for production.... So i should i use it???!!!

[LiUhoNgDan222]

@vilic have tow webpack，so I delete @angular/cli/node_modules/webpack，and run. I delete webpack devDependencies from package with error. So are there any other solutions?

[phacic]

check my solution here.
https://stackoverflow.com/a/46939503/7045826

Hope it works for u

[cnx-brunomelo]

Page not found.

[spottedmahn]

@filipesilva's fix worked for me, thanks!

Interesting though, I followed this tutorial and worked using app/video/video.module#VideoModule.

And the official docs have the app convention:

{
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule',
},

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