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.

1. ng update now clearly shows the progress of the migration. For each migration, we will see information about the migration going on.
   
2. 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

0

0