Angular2 PreloadingStrategyが機能しない

Question

私はangular0でこのcustom route preloadingがどのように機能するのか理解しようとしています。しかし、私はちょうど最初の場所でそれを働かせることができません。

はここに私のコードです

custom.preloading-strategy.ts

export class CustomPreloadingStrategy implements PreloadingStrategy { 
    preload(route: Route, fn:() => Observable<any>): Observable<any> { 
     console.log("Preloading..."); 
     return Observable.of(true).delay(1000).flatMap(_ => fn()); 
    } 
} 

app.routes.ts

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'home', 
     pathMatch: 'full', 
     data: { 
      preload: true 
     } 
    }, 
    { 
     path: 'home', 
     component: HomeComponent, 
     data: { 
      preload: true 
     } 
    } 
]; 

export const appRoutingProviders: any[] = [ 
    CustomPreloadingStrategy 
]; 

export const routeComponents: any[] = [ 
    HomeComponent 
]; 

export const routing = RouterModule.forRoot(appRoutes, { 
    preloadingStrategy: CustomPreloadingStrategy, 
    useHash: true 
}); 

app.module.ts

@NgModule({ 
    bootstrap: [AppComponent], 
    providers: [appRoutingProviders, appServices], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
     SharedComponents, 
     appDirectives, 
     routeComponents, 
     NewsMediaListComponent 
    ], 
    entryComponents: [AppComponent] 
}) 

DEPS

"@angular/common": "2.1.2", 
"@angular/compiler": "2.1.2", 
"@angular/core": "2.1.2", 
"@angular/forms": "2.1.2", 
"@angular/http": "2.1.2", 
"@angular/platform-browser": "2.1.2", 
"@angular/platform-browser-dynamic": "2.1.2", 
"@angular/router": "3.1.2", 
"rxjs": "5.0.0-rc.1", 

しかし、全くエラーまたはがログにありません。そして私はここで何が欠けているのか分からない。

Answer 1

レイジーロードはモジュールでのみ動作します。

あなたのルートにコンポーネントとしてHomeComponentしか使用していない場合、これは機能しません。代わりに、コンポーネント属性のあなたはHomeComponentのための独自のモジュールを作成し、ルート（app.routing.ts）でloadChildrenを使用する必要があります。

{ 
    path: 'home', 
    loadChildren: './../home/home.module#HomeModule', 
    data: { preload: true } 
} 

（別のファイルにhome.moduleを別のモジュールを作成します。 home.routing.ts）（

import { NgModule, Component } from '@angular/core'; 
import { HomeComponent } from './home.component'; 
import { routing } from './home.routing'; 

@NgModule({ 
    imports: [ 
     routing 
    ], 
    declarations: [ 
     HomeComponent 
    ] 
}) 
export class HomeModule { } 

をこのコンポーネントのルーティングファイルを作成します：

）を.TS

import { HomeComponent } from './home.component'; 
import { RouterModule, Routes } from '@angular/router'; 
import { ModuleWithProviders } from '@angular/core'; 

const homeRoutes: Routes = [ 
    { path: '', component: HomeComponent } 
] 

export const routing: ModuleWithProviders = RouterModule.forChild(
    homeRoutes 
); 

data: { preload: true }は、属性がloadChildrenのルートでのみ使用できます。他のルートのデータ属性を設定することはできますが、遅延ロード自体とは関係ありません。

遅延読み込みモジュールについては、このよく書かれたarticle of Victor Savkinをお読みください。

---

更新答え： 私はまた、あなたがこのようなカスタムプリロード戦略でこれを処理する必要があるためdata: { preload: true }が動作しないことを参照してください。

export class SelectedPreloadingStrategy implements PreloadingStrategy { 
    preload(route: Route, load: Function): Observable<any> { 
     return route.data && route.data['preload'] ? load() : Observable.of(null); 
    } 
} 

あなたもするために必要なものこのプリロード戦略をエクスポートして、プロバイダ配列のapp.moduleで使用するようにしてください：

app.routing。TS：

export const APP_ROUTES_MODULE_PROVIDER = [SelectedPreloadingStrategy]; 

とapp.module.tsでそれをインポートします。@NgModule -providersアレイに

import { routing, APP_ROUTES_MODULE_PROVIDER } from './app.routing'; 

：

providers: [ 
    ... 
    APP_ROUTES_MODULE_PROVIDER 
], 

everthingが正しくコンパイルした場合アプリケーションの遅延ロードされたモジュールへのルートを確認するには、Network - 開発者ツールのタブあなたがナビゲートした後でなければ、ルータはモジュールをロードしていないことがわかります。

Answer 2

選択したモジュールのみをプリロードするPreloadAllModulesモジュール戦略と同じ方法で戦略を定義します。ですからとしてルートで正しくloadChildrenを使用する必要があります。また

export const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'home', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'home', 
     loadChildren: './app/home.module#HomeModule', 
     data: { 
      preload: true 
     } 
    } 
]; 

、あなたは再びCustom Pre-loadingを見て、hereのカスタムプリロード戦略を作成するための例下さい。