What’s new in Angular 9 | Top updates in Angular 9 By JS mount

What’s new in Angular 9
Angular 9 release completely switches an angular application to a new fast reliable and performance-oriented compiler by default that is IVY.
Angular 9 also introduced improved ways of testing components.
How to update to version 9
As per Angular official…
✋ To have the best update experience, we recommend you first update to the final release of Angular 8. First, update to the latest version of 8
ng update @angular/cli@8 @angular/core@8 Then, update to 9
ng update @angular/cli @angular/core
Let’s deep into Angular 9 Features one by one:
Ivy – Next Generation Compiler
This Angular version uses IVY compiler and runtime by default. With IVY, Angular teams fix hundreds of bugs and offer numerous advantages.
- Smaller bundle sizes
- Better debugging
- Faster testing
- Improved type checking
- Improved build errors
- Improved CSS class and style binding
- Improved build times, enabling AOT on by default
- Improved Internationalization
😎 Want to learn more about IVY features in detail. please visit the angular official link:
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3
Enhancement in ng update
We’ve made some changes to how ng update works to make it more reliable and informative.
- ng update now
clearly shows the progress of the migration
. For each migration, we will see information about the migration going on. - Angular 9 also introduces the new –create-commits flag. So when run
ng update --create-commits
, the tool commits the state of your codebase after each migration, so you can step through and understand or debug the changes we are making to your code
New options for ‘providedIn’
platform — Specifying providedIn: ‘platform
‘ makes the service available in a special singleton platform injector that is shared by all applications on the page.
any — any
Provides a unique instance in every module (including lazy modules) that injects the token.
Introduced new Components
👏 youtube-player
You can find it with this Github link:
https://github.com/angular/components/tree/master/src/youtube-player
Now we can render a YouTube Player inline within angular application with this new component youtube-player
.
To install, run npm install @angular/youtube-player.
import {YouTubePlayerModule} from '@angular/youtube-player'; -- HTML Code--- template: '<youtube-player videoId="PRQCAL_RMVo"></youtube-player>',
👏 google-maps
Git hub Link:
https://github.com/angular/components/tree/master/src/google-maps
Angular 9 also introduced google-maps components
. These components make it easy to render Google Maps, display markers, and wire up interactivity in a way that works like a normal Angular component, saving you from needing to learn the full Google Maps API.
npm install @angular/google-maps. import { GoogleMapsModule } from '@angular/google-maps';
export class GoogleMapsDemoComponent { apiLoaded: Observable<boolean>; constructor(httpClient: HttpClient) { this.apiLoaded = httpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', 'callback') .pipe( map(() => true), catchError(() => of(false)), ); } } <!-- google-maps-demo.component.html --> <div *ngIf="apiLoaded | async"> <google-map></google-map> </div>
IDE & language service improvements.
Required improvements have been made to the Angular language service
. You can find angular language service extension on the Visual studio market place.
- TextMate grammar for Angular Template Syntax, which now enables syntax highlighting in both inline and external templates
- “Go to definition” for templateUrl and styleUrls
- NgModule and type information in hover tooltip
Extension Link:
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template
TypeScript 3.7 support
Angular 8 use Typescript 3.4 and now Angular 8 comes with Typescript 3.7 support. Angular Team also updated ecosystem dependencies such as Zone.JS and RxJS with this typescript version.
Learn JavaScript Interview questions:
https://www.jsmount.com/javascript-top-interview-questions-answers-you-should-know/
Learn Angular official blog on Angular 9 Updates
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3