角度2の遅延読み込みコンパイルエラー

Question

遅延読み込みを実装しようとしています。私はVideoModuleに正しいパスを入れていることは確かですが、コンパイル時にはまだエラーが出ます。

ここに私のルートを定義する私のAppModuleと私は遅延ロードしたいモジュールです。

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

と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 { 
} 

エラー：

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

VideoModuleが遅延ロードされた場合、それはないがAppModuleにインポートする必要があります。

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

上記から取り外します。

これもインポートしないでください。この行を削除します。

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

はまた、空のプロバイダの配列削除：

providers: [ 
], 

を私はまた、この問題が報告された発見し、ここでそれを解決するにはいくつかの方法：https://github.com/angular/angular-cli/issues/4246