fbpx
Select Page

What’s New in Angular 9 and What is The New Features in Angular 9?

In this blog, we discuss new features of Angular 9, including the cons of angular 8. The Angular 9  version released in the month of October/November 2019. To learn Angular 9 we required basic knowledge of HTML, bootstrap, javascript, and typescript to learn in-depth regarding javascript and typescript and know the differences among the all released Angular versions.

Angular is one of the high-flying open-source frameworks for building mobile applications and web applications. The most up-to-date version, Angular 9.Angular 9  faster, and easier to use and it will be making Angular development easier as compared to other versions. Developers also now have a clear clear project structure. And syntax. The main goal of Angular 9 is to make the Ivy compiler available for all applications. The main advantage of Ivy is that it is able to extensively reduce the size of web applications.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Angular 9 Features

  • Better performance and Smaller bundles
  •  In the core added undecorated classes migration schematic.
  •  Typescript Diagnostics Format is supported in this version.
  • The formControlName also accepts a string as well as a number in the form.
  • Angular Ivy supports Internationalization.
  • Base classes having the selector-less directives in view engine.
  • Support in Ivy selector-less directive as base classes.
  • Now the Ivy compiler is the default for ngc.
  • Renovate all ngtsc diagnostics to ts.Diagnostics.
  • Bazel: supported ts_library targets as entry-points for ng_package.
  • Core: Angular 9 adds dynamic queries schematic.
  • Core: Mark TestBed.get as deprecated.
  • Ivy: expose support ng-add in localize package and window.ng.getDebugNode helper.
  • Ivy: i18n —add new syntax support for $localize metadata block.
  • Ivy: i18n — restructure entry-points for better code reuse.
  • Language-service: TypeScriptHost enables logging.

Let’s see New Features in Angular 9 one by one:

1. Performance and JavaScript Bundles 

We will start by pointing at one of the difficulties that beset previous versions of Angular: large bundle files that have indifferently impacted download times and, as a result, application performance.

One of the current problems with prior Angular versions is the comparatively large file size of the application — more precisely, the file size of the generated JavaScript bundles. If you compare Angular to other libraries like Vue.js or React, the Angular app is extensively larger.

At runtime, you maybe won’t feel the difference. While Angular runtime performance is very good, the loading can take a long time because yet a simple app can be comparatively large.

JavaScript bundles range also hints at another trouble: there is more to learn with Angular because Angular is a complete structure with lots of fixed developer tools, while other JavaScript libraries are mainly paying attention to components.

The Angular team focused on the bundle size and migrated the problem into the small size in the earlier version.

Angular Ivy Effectively Solves Long-Standing Problems

One of the most important features that shipped with Angular 8 was the Ivy preview opt-in. Angular’s new internal build and render pipeline is Ivy. The renderer is the engine used to take the instructions that proceed by the Angular components with the templates and after that translate them into instructions that help to change the DOM (Document Object Model) object.

The Ivy compiler is secreted away, and replaces ViewEngine with Ivy but not change the way you work with Angular previously. But this change does have an important collision on the code that’s being generated.

The Angular 8 foretaste lets users play around with Ivy. With Angular 9, Ivy is the standard renderer used to process the instruction. If a renderer is easier to implement, or more resourceful, that means you can send less code because fewer instructions are required, and that’s the main purpose of Ivy engine.

Ivy is a much smaller JavaScript bundle, due to the fact that  Ivy solves Angular’s bundle weaknesses problems. You can simply say that  Ivy will be a game-changer because it brings Angular applications to a new level in terms of size and performance.

Ivy has not changed the way Angular is used previously, but it does change how the app is generated or rendered. The google Angular team has focused on initiatives like the differential loading of modern JavaScript, which shipped with Angular 8.   This means that dissimilar polyfill bundles are created and deployed mutually. At compile time, only the polyfills that are necessary for the definite browser are loaded, thus leading to less code being downloaded.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

2. Ivy Compiler

The big new feature we’ll dive into is the Ivy compiler. We will give details about what Ivy does and why it’s essentially a significant characteristic for the upcoming of Angular (it solves some of the troubles with large bundles and application performance).

3. Selector-less Bindings and Internationalization

We’ll contact on a small number of other new features, counting selector-less bindings and internationalization support. You’ll see why we’re calling this an evolutionary free rather than revolutionary.

4. Pre-release Version of Angular 9 and Benchmarking of  Angular 8 

We will run some standard tests to compare presentations between a pre-release version of Angular 9 and Angular 8.

Faster Mobile Apps And Angular Ivy

Nowadays all people use smartphones and other devices to use half of the website traffic. A huge percentage of these mobile devices access web pages from locations that go through from slow internet connections.

To solve this slow connection issue Developers can redesign previous applications to reduce the size of the downloadable resources and enhance the mobile user experience, but these changes can take more time and it’s difficult, expensive, and introduce unexpected risks to their application.

But in the earlier version of Angular 9 reducing the javascript bundles through lvy and speed up the web application.

Putting Ivy to Work

In Angular 9, the latest Ivy compiler will finally be the default, so Angular 9 apps built with Ivy will be more efficient and faster.

Ivy was optional in Angular 8 so you had to clearly enable it by adding the following lines to the tsconfig.json file in the angular project folder:

“angularCompilerOptions”: { 

  “enableIvy”: true 

}

And after that  you had to run the compiler by executing the ngc command inside the angular project folder:

node_modules/.bin/ngc

Putting Ivy to Work

But in the Angular 9, the setting off the enable option in the tsconfig.json file is no longer needed since the Ivy renderer is the default in angular 9 applications.

Selector-less Directives

In angular 8 lvy previews one feature is the missing name of that feature is ViewEngine which is available in angular 9. ViewEngine was the capability to use selector-less directives as main base classes.

In Angular 9, this viewEngine feature has been added to Ivy so that developers get the benefits of Ivy compilation, but don’t miss previous functionality.

Below example showing a decorated child class that inherits a constructor from an undecorated base class:

export class BaseDir { 

  constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {} 

}

@Directive({ 

  selector: ‘[child]’, 

}) 

export class ChildDir extends BaseDir { 

  // constructor inherited from BaseDir 

}

Angular 9 ViewEngine already supports this pattern. But, it was misplaced in Ivy’s first release: without the @directive annotation identifying the BaseDir class as a directive, but the Ivy compiler did not understand information about its constructor parameters.

Angular Version 9 will now send with his feature so that it becomes consistent across all of the Angular codebase.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Steps to Update Angular version 9

To update angular previous version with the latest version need to execute the below command on cli

ng  update @angular/cli @angular/core

While the release of angular  is not final, and currently in release candidate stage, you will  need to add the –next flag:

ng update @angular/cli @angular/core –next

Localization (i18n)

If in the previous application you are using Angular’s localization (i18n) framework, then there is a need to use the ng addcommand to install a new @angular/localize package:

ng add @angular/localize

When you examine the difference  of the angular.json file after updating, you will also notice that a new i18n configuration section:

Localization

There are some updates to your angular.json configuration you should understand .

First, there is a need to specify the sourceLocal property. The default value for sourceLocal  is en-US, so specify the source locale for your web application based on the locale of the source code:

sourceLocal

Second, thing is to consider updating the baseHref configuration for every locale based on application requirements. In most instances, we will allocate each locale of our application using either unique paths or unique subdomains.

In my application  case, I wanted every locale to be served on unique paths:

  • US English: /en-US/
  • Deutsch: /de/

baseHref

As such, I use to modify the baseHref for the de locale to:

Angular version 8 application used multiple build configurations for every locale. Based on my analysis so far, you can remove these as they are no longer needed:

In my case, I removed both the production-de and de configurations. Finally, update your production build command in the application package.json file to the new –localize flag to build all required localizations:

Note:

  • In the first step, I have a new serve:dist command where I use the http-server Node module to assign a localized version of my invention production build.
  • Second, I updated the build command to include the new –localize flag to build all localizations.

Let me also mention that you simply can create an additional configuration for building either a selected locale or a group of locales.

Post Update Checklist in Angular version 9

After we have successfully updated from angular 8 versions to Angular version 9, there are two minor things we need to do:

  1. Replace the deprecated TestBed.get() method to the new  TestBed.inject<T>() method.
  2. Also, Remove the unnecessary entryComponents properties in our @NgModule() decorators.

Migrate to TestBed.inject()

In  the Angular version 9 update, our first work is to migrate from TestBed.get() method  to TestBed.inject<T>() method.

Before:

Before

After:

Note:

  • We replace TestBed.get() to TestBed.inject<T>()
  • We specify the generic of the type that is returned from the inject() method.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Remove entryComponents

Angular version 9 and the new Ivy renderer, there is no need to manually instruct the compiler of components that are outside the component dependent component. The best example of components that need to be declared in the entryComponents array is dialogs.

This update is simple, and who doesn’t want to delete code. Just remove the array of entryComponents from all @NgModule() decorators in your web application.

Before:

And after we have removed the not required entryComponents array:

 

Author-
Manisha Jadhav | SevenMentor Pvt Ltd.

Call the Trainer and Book your free demo Class for JAVA now!!!

call icon

© Copyright 2020 | Sevenmentor Pvt Ltd.

 

Pin It on Pinterest

× How can I help you?