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
What’s new in Angular V9 & Deep dive into the n...
Search
Eliran Eliassy
March 26, 2020
Technology
1
260
What’s new in Angular V9 & Deep dive into the new Renderer Injector
Eliran Eliassy
March 26, 2020
Tweet
Share
More Decks by Eliran Eliassy
See All by Eliran Eliassy
Module Federation in practice with NX link
eliraneliassy
0
240
Angular Core Abstractions - The ItreableDiffer
eliraneliassy
0
340
Custom Components Templates
eliraneliassy
0
140
Understanding the Angular Injector
eliraneliassy
0
190
What are RXJS schedulers and why we need them to test observables
eliraneliassy
0
150
Everything you need to know about Angular Ivy
eliraneliassy
1
930
Bye bye NgModules
eliraneliassy
1
880
Change detection in the world of Ivy
eliraneliassy
1
220
Angular generic forms
eliraneliassy
0
460
Other Decks in Technology
See All in Technology
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
610
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
Building GoReleaser - from shell script to paid product
caarlos0
0
270
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
270
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
MCPと認可まわりの話 / mcp_and_authorization
convto
1
150
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
170
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
220
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
We Have a Design System, Now What?
morganepeng
53
7.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
306
45k
Transcript
What’s new in Angular V9 & Deep dive into the
new Renderer Injector eliraneliassy
e-square.io — Founder & CEO @ e-square.io — GDE for
Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf
e-square.io 1. Bundle size 2. Testing 3. Debugging 4. CSS
Binding 5. Build Errors 6. Build speed What’s new In Angular 9 7. Improve CD 8. Strict Templates 9. providedIn 10.Harnesses 11. New Components 12. TypeScript 3.7 13. Universal
e-square.io 1. Bundle size 2. Testing 3. Debugging 4. CSS
Binding 5. Build Errors 6. Build speed What’s new In Angular 9 7. Improve CD 8. Strict Templates 9. providedIn 10.Harnesses 11. New Components 12. TypeScript 3.7 13. Universal
e-square.io Hello, Angular Ivy! 1. Smaller Bundle size 2. Faster
Compilations 3. Simpler Debugging 4. Improve type checking 5. Backwards compatible
e-square.io Ivy is enabler
Bundle Size e-square.io
e-square.io http://bit.ly/all-you-need-to-know- angular-ivy http://bit.ly/the-future-of-angular- components
Faster Unit test e-square.io • 40-50% faster • Don’t recompile
between tests
Debugging e-square.io ng object available in the code!
Build Errors e-square.io
Strict Template e-square.io • fullTemplateTypeCheck — Old behaviour that type
checks most things • strictTemplates — New Option: Check everything with the strictest rules
Component Harness e-square.io • Test API for components and directives
• Faster & safer • Less boilerplate
e-square.io Improve CD - NgZone Event Coalescing
e-square.io R3Injector
e-square.io ProvidedIn - new options
e-square.io What are Injectors? • Injector is a Key-Value map
of Token -> Provider
e-square.io Injector - get and register
e-square.io Creating providers
e-square.io Injecting the provider
e-square.io Resolve the Provider - component level
e-square.io Resolve the Provider
e-square.io providedIn levels • ‘root’: The application-level injector in most
apps. • ‘any’: Provides a unique instance in every module (including lazy modules) that injects the token. • ‘platform’: A special singleton platform injector shared by all applications on the page.
e-square.io Resolve the Provider - Module level
e-square.io Resolve the Provider - special decorators • @Optional() •
@Host() • @SkipSelf() • @Self()
e-square.io How it work behind the scenes • Injector is
a Key-Value map of Token -> Provider
e-square.io The magic - @Injectable
e-square.io The magic - defineInjectable
e-square.io R3Injector
e-square.io Micro-Front end? Not yet…
e-square.io Where else then?
We’re here to help you!
Thank You @eliraneliassy
[email protected]
eliraneliassy https://eliassy.dev https://e-square.io