Come precaricare le viste angolari2 quindi non si verificherà lo sfarfallio della pagina bianca al primo caricamento?

Question

Sto costruendo un'app angolare 2 in JS normale. Il mio problema è che quando cambio da una pagina a un'altra sfarfallio una pagina bianca finché non viene visualizzata la nuova vista. Questo succede per tutti i componenti solo la prima volta che li accedo. Se vado sullo stesso percorso per la seconda volta, la pagina viene caricata senza una pagina bianca. Ho catturare lo schermo per spiegare meglio il mio problema: https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing

Qui è la mia vista principale:

<router-outlet></router-outlet> 

<nav id="menu"> 
    <a [routerLink]="['Page1']">Page 1</a> 
    <a [routerLink]="['Page2']">Page 2</a> 
    <a [routerLink]="['Page3']">Page 3</a> 
    <a [routerLink]="['Page4']">Page 4</a> 
    <a [routerLink]="['Page5']">Page 5</a> 
</nav> 

RouteConfig è definita in questo modo:

AppComponent = ng.router 
    .RouteConfig([ 
     {path: '/page1', name:"Page1", component: Page1Component, useAsDefault: true }, 
     {path: '/page2', name:"Page2", component: Page2Component}, 
     ... 
    ]) 
    (AppComponent); 

E tutti i miei componenti hanno un .html file e un file .css come questo:

Page1Component = ng.core 
    .Component({ 
     selector: 'rl-page1', 
     templateUrl: 'app/components/page1/view.html', 
     styleUrls: ['app/components/page1/style.css'], 
     directives: [ng.router.ROUTER_DIRECTIVES] 
    }) 
    .Class({ 
     constructor: [ng.router.Router, function(router) { 
      this.router = router; 


     }] 
    }); 

Da come appaiono le pagine della cache angolare dopo che le ho accedute e al secondo accesso apparirà immediatamente (senza lo sfarfallio del bianco). Cerco come posso precaricare questo, ma non riesco a trovare alcuna risposta o metodo su questo.

Per favore fatemi sapere se avete bisogno di più codice.

(io non uso Pagina1, Pagina2 in applicazione reale, solo per questa domanda ho cambiato per essere più chiaro per esempio)

Grazie.

EDIT: 2016-03-18

cerco di usare DynamicComponentLoader per caricare tutti i componenti in un div nascosto. Il codice è simile a AppComponent:

ngOnInit: function(){ 
    this.dcl.loadIntoLocation(Page1Component, this.elementRef, 'preloadpages'); 
    this.dcl.loadIntoLocation(Page2Component, this.elementRef, 'preloadpages'); 
}, 

e il codice HTML in cui viene caricato è: <div style="display: none;"><div #preloadpages></div></div>

Ma ho affrontato 2 problemi:

1. se uno dei miei componente ha nel costruttore RouteParams come questo:

   costruttore: [ng.router.RouteParams, funzione (routeParam) { ... }], Ho ricevuto questo errore: EXCEPTION: No provider for RouteParams! (class19 -> RouteParams)

2. Tutti i componenti vengono caricati proprio come si apre. Se ho una chiamata ajax in un costruttore, viene creata una chiamata ajax e tutti i componenti html verranno aggiunti nel mio div nascosto. Qui può esserci un problema di prestazioni se all'inizio provo a caricare come 5 componenti e alcuni fanno chiamate ajax. Sto cercando se c'è una soluzione per caricare solo html + css o inviare un flag al costruttore di componenti per sapere che sto caricando nascosto solo per la predicazione.

Grazie.

Answer 1

Aggiungi un involucro intorno al <router-outlet>

<div [hidden]="!isInitialized"> 
    <router-outlet></router-outlet> 
</div> 

Nel componente pagina Imposta isInitialized a false.Quindi chiamare

this.router.navigate(['Page1']) 
.then(_ => this.router.navigate(['page2'])) 
.then(_ => this.router.navigate(['page3'])) 
... 
.then(_ => { 
    this.isInitialized = true; 
    this.router.navigate(['Page1']); 
}); 

Answer 2

Parafrasando https://stackoverflow.com/a/37298914/441662

Il problema è che i file vengono caricati separatamente, il che è possibile evitare usando qualcosa come webpack che compila le fonti in fasci che possono comprendere sia la vostra applicazione ed i modelli utilizzati in i percorsi. (anche se non riesco ancora a spiegare il salto in cima alla pagina).

Ecco come è possibile modificare la configurazione webpack del progetto angular/angular2-seed:

package.json

"devDependencies": { 
    ..., 
    "html-loader": "^0.4.3", 
}, 

webpack.config.js

module: { 
    loaders: [ 
    ..., 
    { test: /\.html$/, loader: 'html' } 
    ] 
} 

Esempio di utilizzo nel vostro componenti. ts

@Component({ 
    template: require('app/components/your-component/your-component.html') 
}) 

Ora i percorsi vengono caricati istantaneamente e non si verificano sfarfallii o salti.