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
Angular, Lazy Loading, ngVikings in Copenhagen,...
Search
Manfred Steyer
PRO
February 11, 2017
Programming
1
560
Angular, Lazy Loading, ngVikings in Copenhagen, Feb 2017
Manfred Steyer
PRO
February 11, 2017
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
170
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
79
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
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Select API from Kotlin Coroutine
jmatsu
1
210
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
410
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
PicoRuby on Rails
makicamel
2
120
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
WindowInsetsだってテストしたい
ryunen344
1
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How to Ace a Technical Interview
jacobian
277
23k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Agile that works and the tools we love
rasmusluckow
329
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
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 • Preloading • Prevent Lazy Loading
• 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 • creates several chunks Page
9
DEMO Page 10
Preloading Page 11
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
Activating Preloading Page 13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page 14
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 (lazy) includes
CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
DEMO
Huge CoreModule? Page 29 AppModule FlightModule SharedModule includes (lazy)
includes CoreModule includes includes
Solution (for Libraries) Page 30 AppModule FlightModule AuthModule includes
(lazy) CoreModule
Solution (for Libraries) Page 31 AppModule FlightModule AuthModule includes
(lazy) includes (with Services) CoreModule includes includes (without Services)
Auth Module Page 32 @NgModule({ […], providers: [] })
export class AuthModule { }
Auth Module Page 33 @NgModule({ […], providers: [] })
export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
DEMO Page 34
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
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer