Angular2 PreloadingStrategy가 작동하지 않습니다.

Question

angular2에서이 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] 
}) 

이 오류가 없다거나 전혀 로그에, 그러나

"@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", 

을 deps. 그리고 나는 내가 여기서 무엇을 놓치고 있는지 모른다.

Answer 1

지연 로딩은 모듈에서만 작동합니다.

경로로 구성 요소로 HomeComponent 만 사용하는 경우에는 작동하지 않습니다. 대신 구성 요소 속성의 경우 (가을 app.routing.ts)에 HomeComponent에 대한 자신의 모듈을 생성하고 경로에 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 { } 

을 그리고이 구성 요소에 대한 라우팅 파일을 만듭니다 :

,536)을 .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 }을 사용할 수 있습니다. 다른 경로에 대해서는 여전히 데이터 속성을 설정할 수 있지만 지연로드 자체와는 아무런 관련이 없습니다.

게으른 로딩 모듈에 대해서는 잘 작성된 article of Victor Savkin을 읽어야합니다.

---

업데이트 답 :

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

당신은 또한에 필요한 것 : 나는 또한이 같은 사용자 정의 사전로드 전략이 처리해야하기 때문에 data: { preload: true } 작동하지 않습니다 것을 볼 이 사전로드 전략을 공급자 배열의 app.module에서 사용하도록 내보내십시오.

app.routing.모든게 올바르게하고 컴파일하면

providers: [ 
    ... 
    APP_ROUTES_MODULE_PROVIDER 
], 

: TS :

@NgModule -providers 배열에

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

:

export const APP_ROUTES_MODULE_PROVIDER = [SelectedPreloadingStrategy]; 

및 app.module.ts에서 가져 귀하의 응용 프로그램에서 게으른로드 모듈에 경로 Network - 귀하의 개발자 도구 탭을 확인해야합니다 라우터를 탐색 한 후에 만 ​​라우터가 모듈을로드했음을 알 수 있습니다.

Answer 2

선택한 모듈 만 미리로드하는 PreloadAllModules 모듈 전략과 같은 방식으로 전략을 정의하려고합니다.

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

는 또 다시 Custom Pre-loading에서 모양과 here에서 사용자 지정 사전로드 전략을 만들기위한 예를하시기 바랍니다 : 그래서 당신은 제대로 경로에 loadChildren을 사용해야합니다.