Lazy Loading und Preloading mit Angular, Präsentation von ngGraz, November 2016

Transcript

1. Lazy Loading und Preloading mit Angular 2 Manfred Steyer
2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert Page  2 Manfred Steyer
3. Inhalt • Lazy Loading • Preloading • Nutzung von Shared Modules Page  3
4. Lazy Loading Page  4
5. Modul-Struktur Page  5 AppModule … … … SharedModule Root Module Feature Modules Shared Module
6. Root Module mit Lazy Loading Page  6 const APP_ROUTE_CONFIG: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
7. Routen für Feature Module Page  7 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] }
8. Konfiguration von Webpack • angular2-router-loader • Splittet Bundle in mehrere Teile Page  8
9. DEMO Page  9
10. Preloading Page  10
11. Idee • Eventuell später benötigte Module werden nach (!) Anwendungsstart geladen • Wird das Modul später tatsächlich benötigt, steht es augenblicklich zur Verfügung Page  11
12. Preloading aktivieren Page  12 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
13. DEMO Page  13
14. Lazy Loading und Shared Services Page  14
15. DEMO Page  15
16. Lazy Loading und Shared Modules Page  16 AppModule FlugModule SharedModule includes includes (lazy) includes
17. Lazy Loading und Shared Modules Page  17 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
18. Lösung Page  18 AppModule FlugModule SharedModule includes (inkl. Provider) includes (lazy) includes (exkl. Provider) AuthService
19. Shared Module Page  19 @NgModule({ […], providers: [] }) export class SharedModule { }
20. Shared Module Page  20 @NgModule({ […], providers: [] }) export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
21. DEMO Page  21
22. Zusammenfassung Page  22 Lazy Loading von Modulen webpack splittet Bundle Preloading Strategy Shared Modules mit und ohne Provider
23. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer