Angular 2 lazy loading techniques

Question

Ho già scritto una grande applicazione con Angular 1 e requireJS con AMD per il caricamento e la strutturazione pigri. L'applicazione non usa percorsi ma parti dell'applicazione come HTML, css e Javascript (moduli angolari) sono pigri.

Ora voglio passare ad Angular 2 e sto cercando la migliore tecnica di caricamento lazy per contenuti HTML, css e JS (angolari) che non dipendono dai percorsi e che non dipende da migliaia di javascript diversi quadri.

così pigro componenti percorso caricamento sembra essere abbastanza semplice: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

ma come è possibile raggiungere questo scenario senza percorsi? Consiglieresti qualcosa come il webpack o dovrei continuare a richiedere JS? C'è qualcosa come OClazyload per angular 2? O funziona in qualche modo con Angular 2 anche senza alcun framework?

Sono un amico di "keep it simple" e mi piacerebbe davvero mantenerlo il più piccolo e semplice possibile.

Grazie!

Answer 1

Angular 2 si basa su componenti Web. Il modo più semplice ("mantienilo semplice" come hai detto) sta usando rotte e componenti. Puoi anche caricare i componenti semplicemente usando le direttive nel tuo html. per esempio:

@Component({ 
    selector: 'my-component', // directive name 
    templateUrl: './app/my.component.html', 
    directives: [] 
}) 
export class MyComponent {} 



@Component({ 
    selector: 'root-component', // directive name 
    directives: [MyComponent], 
    template: '<my-component></my-component>', 
}) 
export class myComponent {} 

se si modifica il modello per includere dinamicamente <my-component> che verrà caricare dinamicamente il componente. Questa non è una buona pratica.

c'è un dynamic component loader per l'angolo 2, ma non è semplice come utilizzare percorsi o direttive. creerà un'istanza di un componente e lo attaccherà a un contenitore di visualizzazione situato all'interno della vista componente di un'altra istanza di componente.

con esso è possibile utilizzare:

@Component({ 
    selector: 'child-component', 
    template: 'Child' 
}) 
class ChildComponent { 
} 
@Component({ 
    selector: 'my-app', 
    template: 'Parent (<child id="child"></child>)' 
}) 
class MyApp { 
    constructor(dcl: DynamicComponentLoader, injector: Injector) { 
    dcl.loadAsRoot(ChildComponent, '#child', injector); 
    } 
} 
bootstrap(MyApp); 

Il DOM risultante:

<my-app> 
    Parent (
    <child id="child">Child</child> 
) 
</my-app> 

C'è un'altra opzione (sguardo al collegamento angular2 sopra) in cui è possibile opzionalmente fornire ai provider di configurare l'iniettore fornito per questa istanza componente.

Spero che questo aiuti.

Answer 2

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

lascia supporre abbiamo due pagine nella nostra applicazione, “casa” e “circa”. Alcune persone potrebbero non raggiungere mai la pagina about, quindi ha senso solo servire il carico della pagina about alle persone che effettivamente ne hanno bisogno. Questo è dove useremo il caricamento pigro.

Answer 3

Con angular 2 Ultima versione, è possibile utilizzare la proprietà loadchildren per eseguire il caricamento lazy. Per esempio: { percorso: 'cliente', loadChildren: './customer.module#Customer2Module?chunkName=Customer' },

In questo esempio sopra sto usando webpack impacchettatriciLe (angolare 2 router loader) + Anguar 2 Il routing a pigro carica i moduli.