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 new Renderer Injector
Search
Eliran Eliassy
March 26, 2020
Technology
0
190
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
220
Angular Core Abstractions - The ItreableDiffer
eliraneliassy
0
320
Custom Components Templates
eliraneliassy
0
120
Understanding the Angular Injector
eliraneliassy
0
170
What are RXJS schedulers and why we need them to test observables
eliraneliassy
0
140
Everything you need to know about Angular Ivy
eliraneliassy
1
920
Bye bye NgModules
eliraneliassy
1
850
Change detection in the world of Ivy
eliraneliassy
1
200
Angular generic forms
eliraneliassy
0
440
Other Decks in Technology
See All in Technology
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
980
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
0
170
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
Terraformあれやこれ/terraform-this-and-that
emiki
6
490
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
NgRx Signal Store
rainerhahnekamp
0
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
4 Signs Your Business is Dying
shpigford
175
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Music & Morning Musume
bryan
41
5.6k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Statistics for Hackers
jakevdp
789
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Designing for Performance
lara
601
67k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
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