Solvedangular cli Angular 2 lazy loading compiling error

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.

23 Answers

✔️Accepted Answer

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'

More Issues: