Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Improving Start-up Performance with Lazy Loadin...
Search
Manfred Steyer
PRO
December 09, 2016
Programming
0
520
Improving Start-up Performance with Lazy Loading in Angular 2
Slides from talk at ngbe in Belgium, 2016
Manfred Steyer
PRO
December 09, 2016
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
160
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
76
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.7k
XP, Testing and ninja testing
m_seki
3
220
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
830
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
470
CursorはMCPを使った方が良いぞ
taigakono
1
200
ReadMoreTextView
fornewid
1
490
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.5k
Goで作る、開発・CI環境
sin392
0
180
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
100
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Visualization
eitanlees
146
16k
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A designer walks into a library…
pauljervisheath
207
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Docker and Python
trallard
44
3.4k
Transcript
Improving Start-up Performance with Lazy Loading in Angular 2 Manfred
Steyer SOFTWAREarchitekt.at ManfredSteyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page 2 Manfred Steyer
Contents • Lazy Loading • Prevent Lazy Loading • Preloading
• Shared Modules and Lazy Loading Page 3
Lazy Loading Page 4
Module Structure Page 5 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Lazy Loading Page 6 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Root Module with Lazy Loading Page 7 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routes for Feature Module Page 8 const FLIGHT_ROUTES =
[ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
webpack configuration • angular2-router-loader • splits bundle into several chunks
Page 9
DEMO Page 10
Prevent Lazy-Loading
Guards • Services that can intercept routing • Can prevent
requested action
Base Types for Guards CanActivate CanActivateChild CanDeactivate CanLoad
Sample @Injectable() export class AuthLoadGuard implements CanLoad { canLoad(route: Route):
Observale<boolean> | Promise<boolean> | boolean { return true; } }
Configure a Guard let APP_ROUTES: Routes = [ { path:
'flight-booking', loadChildren: ‚[…]', canLoad: [AuthLoadGuard] }, […] } Just a Token // Your Module providers: [ { provide: AuthLoadGuard, useClass: AuthLoadGuard} ],
Caution • This has nothing to do with security •
It’s about usability
DEMO
Preloading Page 18
Idea • Modules that might be needed later are loaded
after (!) the start of the application • When the module is actually needed later, it is available immediately Page 19
Activating Preloading Page 20 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page 21
Lazy Loading and Shared Modules Page 22
DEMO Page 23
Lazy Loading and Shared Modules Page 24 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService
Lazy Loading and Shared Modules Page 25 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading and Shared Modules Page 26 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Solution Page 27 AppModule FlightModule SharedModule includes (with Providers)
includes (lazy) includes (without Providers) AuthService
Shared Module Page 28 @NgModule({ […], providers: [] })
export class SharedModule { }
Shared Module Page 29 @NgModule({ […], providers: [] })
export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
DEMO Page 30
Summary Page 31 Lazy Loading of Modules webpack splits
bundle Prevent Lazy Loading with Guards Preloading Strategy Shared Modules w/ and w/o Providers Lots of lazy animals on the web ;-)
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer