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
240
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
130
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
930
Bye bye NgModules
eliraneliassy
1
870
Change detection in the world of Ivy
eliraneliassy
1
210
Angular generic forms
eliraneliassy
0
450
Other Decks in Technology
See All in Technology
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
280
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
2
150
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
脳波を用いた嗜好マッチングシステム
hokkey621
0
270
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
130
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
460
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
140
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
240
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
160
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
521
39k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Producing Creativity
orderedlist
PRO
344
40k
Statistics for Hackers
jakevdp
797
220k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A Tale of Four Properties
chriscoyier
158
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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