Angular, Lazy Loading, ngVikings in Copenhagen, Feb 2017

Transcript

1. Improving Start-up Performance with Lazy Loading in Angular 2 Manfred

   Steyer SOFTWAREarchitekt.at ManfredSteyer

2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

   & Consultant • Focus: Angular • Google Developer Expert (GDE) Page  2 Manfred Steyer

3. Contents • Lazy Loading • Preloading • Prevent Lazy Loading

   • Shared Modules and Lazy Loading Page  3

4. Lazy Loading Page  4

5. Module Structure Page  5 AppModule … … … SharedModule

   Root Module Feature Modules Shared Module

6. Lazy Loading Page  6 AppModule … … … SharedModule

   Root Module Feature Modules Shared Module

7. Root Module with Lazy Loading Page  7 const APP_ROUTE_CONFIG:

   Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];

8. Routes for Feature Module Page  8 const FLIGHT_ROUTES =

   [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading

9. webpack configuration • angular2-router-loader • creates several chunks Page 

   9

10. DEMO Page  10

11. Preloading Page  11

12. Idea • Modules that might be needed later are loaded

    after (!) the start of the application • When the module is actually needed, it is available immediately Page  12

13. Activating Preloading Page  13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,

    { preloadingStrategy: PreloadAllModules });

14. DEMO Page  14

15. Lazy Loading and Shared Modules Page  22

16. DEMO Page  23

17. Lazy Loading and Shared Modules Page  24 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService

18. Lazy Loading and Shared Modules Page  25 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService

19. Lazy Loading and Shared Modules Page  26 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService

20. Solution Page  27 AppModule FlightModule SharedModule includes (lazy) includes

    CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell

21. DEMO

22. Huge CoreModule? Page  29 AppModule FlightModule SharedModule includes (lazy)

    includes CoreModule includes includes

23. Solution (for Libraries) Page  30 AppModule FlightModule AuthModule includes

    (lazy) CoreModule

24. Solution (for Libraries) Page  31 AppModule FlightModule AuthModule includes

    (lazy) includes (with Services) CoreModule includes includes (without Services)

25. Auth Module Page  32 @NgModule({ […], providers: [] })

    export class AuthModule { }

26. Auth Module Page  33 @NgModule({ […], providers: [] })

    export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }

27. DEMO Page  34

28. Summary Page  35 Lazy Loading of Modules webpack splits

    chunks Prevent Lazy Loading with Guards Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers

29. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer