Improving Startup Performance with Lazy Loading in Angular
summary
Shows that switching routes to loadChildren with 'path#Module' and using Webpack/CLI code-splitting cuts the initial bundle and makes the flight-booking demo load feature chunks on demand (observed ~1–2 second fetch delay when navigating). Demonstrates built-in preloadAllModules and a custom strategy that delays preloading by seven seconds to hide that delay. Reveals duplicate-service bugs from lazy-loaded injectors and fixes them with a CoreModule imported only in AppModule or a shared module exposing services via the forRoot pattern; the fixes work in the demo.
AI-written summary · about
chapters (7)
- 0:00Introduction to lazy loading
- 1:34Configuring lazy loading
- 5:06Lazy loading demonstration
- 9:21Implementing pre-loading
- 15:37Custom pre-loading strategies
- 20:51Shared module issues
- 28:31The forRoot pattern
related talks
34mImproving Start-up Performance with Lazy Loading in Angular 2
30mStep by Step Improving Startup Performance with Lazy Loading in Angular
17mBe lazy, but with strategy
29mAngular Router - Let's Get Lazy!
21mPreload Strategies: Step in Time, Step in Time!
34mLazy-loading techniques beyond (Angular) router
29mAdv Lazy Loading w/ Angular
45mLazy Loading: Supercharge your Angular apps!