Angular 2 lazy loading compiling error

Question

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'}
        ])
    ],
    providers: [
    ],
    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
    ],
    exports: [
    ]
})
export class VideoModule {
}

Errors I get:

40% building modules 1/2 modules 1 active ...Dev\pfilter-web\src\app\app.module.tsError: 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)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 70% building modules 2/2 modules 0 active(node:9200) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: callback(): The callback was already called.
webpack: wait until bundle finished: /
webpack: wait until bundle finished: /

Answer 1

If the VideoModule is lazy loaded, it should not be imported in AppModule:

imports: [
    BrowserModule,
    HttpModule,
    **VideoModule**,
    RouterModule.forRoot([
        {path: '', component: HomeComponent},
        {path: 'video', loadChildren: 'app/video/video.module#VideoModule'}
    ])
],

Remove it from the above.

It also should not be imported. Remove this line:

import {VideoModule} from './video/video.module';

Also remove the empty providers array:

providers: [
],

I also found this issue reported and several ways to resolve it here: https://github.com/angular/angular-cli/issues/4246