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 <#6246 (comment)>, 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" ***@***.***> 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 <#6246 (comment)>, 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" ***@***.***> 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": { ***@***.***/animations": "^4.0.1", ***@***.***/cli": "^1.0.2", ***@***.***/common": "^4.1.1", ***@***.***/compiler": "^4.0.1", ***@***.***/core": "^4.1.1", ***@***.***/forms": "^4.0.1", ***@***.***/http": "^4.0.1", ***@***.***/material": "git+https://github.com/angular/material2-builds.git# 06ce5b413dffed1eacd5f3574fc7b9ec7ba36bde", ***@***.***/platform-browser": "^4.0.1", ***@***.***/platform-browser-dynamic": "^4.0.1", ***@***.***/platform-server": "^4.0.1", ***@***.***/router": "^4.0.1", ***@***.***/core": "^1.0.0-beta.3-2", ***@***.***/dynamic-forms": "^1.0.0-beta.3-2", ***@***.***/highlight": "^1.0.0-beta.3-2", ***@***.***/http": "^1.0.0-beta.3-2", ***@***.***/markdown": "^1.0.0-beta.3-2", ***@***.***/webpack": "^1.3.1", ***@***.***/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": { ***@***.***/cli": "^1.0.3", ***@***.***/common": "^4.1.1", ***@***.***/compiler": "^4.0.1", ***@***.***/compiler-cli": "^4.0.1", ***@***.***/core": "^4.1.1", ***@***.***/forms": "^4.0.1", ***@***.***/http": "^4.0.1", ***@***.***/hmr": "^1.2.2", ***@***.***/hmr-loader": "^3.0.2", ***@***.***/webpack": "^1.3.1", ***@***.***/core-js": "^0.9.41", ***@***.***/hammerjs": "^2.0.34", ***@***.***/jasmine": "^2.5.47", ***@***.***/jquery": "^2.0.41", ***@***.***/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 <#6246 (comment)>, 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:
#6246 (comment)

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:
devyumao/angular2-busy#55