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
Lazy Loading und Preloading mit Angular, Präse...
Search
Manfred Steyer
PRO
November 26, 2016
Programming
0
250
Lazy Loading und Preloading mit Angular, Präsentation von ngGraz, November 2016
Manfred Steyer
PRO
November 26, 2016
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
為你自己學 Python - 冷知識篇
eddie
1
350
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
130
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Rancher と Terraform
fufuhu
2
550
Design Foundational Data Engineering Observability
sucitw
3
200
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
print("Hello, World")
eddie
2
530
Kiroで始めるAI-DLC
kaonash
2
620
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
339
57k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
161
25k
Site-Speed That Sticks
csswizardry
10
820
Visualization
eitanlees
148
16k
It's Worth the Effort
3n
187
28k
Transcript
Lazy Loading und Preloading mit Angular 2 Manfred Steyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert Page 2 Manfred Steyer
Inhalt • Lazy Loading • Preloading • Nutzung von Shared
Modules Page 3
Lazy Loading Page 4
Modul-Struktur Page 5 AppModule … … … SharedModule Root
Module Feature Modules Shared Module
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' } ];
Routen für Feature Module Page 7 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] }
Konfiguration von Webpack • angular2-router-loader • Splittet Bundle in mehrere
Teile Page 8
DEMO Page 9
Preloading Page 10
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
Preloading aktivieren Page 12 export const AppRoutesModule = RouterModule.forRoot(
ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
DEMO Page 13
Lazy Loading und Shared Services Page 14
DEMO Page 15
Lazy Loading und Shared Modules Page 16 AppModule FlugModule
SharedModule includes includes (lazy) includes
Lazy Loading und Shared Modules Page 17 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lösung Page 18 AppModule FlugModule SharedModule includes (inkl. Provider)
includes (lazy) includes (exkl. Provider) AuthService
Shared Module Page 19 @NgModule({ […], providers: [] })
export class SharedModule { }
Shared Module Page 20 @NgModule({ […], providers: [] })
export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
DEMO Page 21
Zusammenfassung Page 22 Lazy Loading von Modulen webpack splittet
Bundle Preloading Strategy Shared Modules mit und ohne Provider
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer