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
320
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
480
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
220
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
220
Other Decks in Programming
See All in Programming
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
5k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
350
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
1.2k
私の後悔をAWS DMSで解決した話
hiramax
4
190
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
3
540
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
OSS開発者という働き方
andpad
5
1.7k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
250
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Improving my own Ruby thereafter
sisshiki1969
1
160
Namespace and Its Future
tagomoris
6
700
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Gamification - CAS2011
davidbonilla
81
5.4k
Building Applications with DynamoDB
mza
96
6.6k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Scaling GitHub
holman
463
140k
Optimizing for Happiness
mojombo
379
70k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Into the Great Unknown - MozCon
thekraken
40
2k
GraphQLとの向き合い方2022年版
quramy
49
14k
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