Angular 9: Migrations, Features and Advantages

This blog is written to help you understand what’s new in the latest version of Angular. It is not possible and will be unfair if we finish this article in short.

Angular is one of the most popular web application framework, and you must be aware of the news of Angular 9 migrations. It has a lot of features and functions.

We understand that many of us are too busy to read the whole article. Hence we have added a TL;DR(Too Long Didn’t Read) Version of the article at the end of article.

Let’s understand every aspect of Angular 9 in-depth

What is Angular Web Framework?

Angular (known as AngularJS in past) is a Front-end JavaScript based web app development framework maintained by Google.

Popular brands like Paypal, Freelancer, Forbes, and BMW are relying on the efficiency of the Angular framework for web development.

AngularJS has evolved through a long journey, from the year 2009. Every new version and update has introduced new features and functions which has made Angular the top choice among its users.

DID YOU KNOW: As per the statistics by w3techs; Angular ranks above most of the javascript libraries like Bootstrap, Popper, jQuery, and Modernizr.

Today; every web app and single-page app build on Angular framework is looking for Angular 9 migrations. The major reason behind this is the latest features, advantages, and changes introduced in the Angular 9 framework.

Let’s begin this guide with detailed information on this latest version of Angular.

Angular 9 Features

Following features are set to Transform the Coding Process of the Angular Apps

1. Ivy Compiler

The most important update is; now Ivy compiler will be a default part of Angular version 9. Every application will have a default compiler called Ivy render. There is no doubt that apps that are built with Ivy are more efficient.

Advantages Ivy compiler in Angular 9 Apps

1. Faster performance
2. Less Bundle Size
3. Amazing debugging
4. Better Testing
5. Completely new CSS class and Style Binding
6. An effective way of catching the bugs
7. Easy to read the build errors
8. Improvement in the Build Times

Faster Performance

• Today; most of the mobile apps work on the data from the internet hence in the countries where internet connection is slow apps do not respond smoothly.
• For better mobile user experience Angular 9 developers can now decrease the size of downloadable files which will result in better performance of the app.

Less Bundle Size

An amazing advantage of Angular 9 is its capability to remove unnecessary bundles, modules or parts of the code. Moreover; the parts of the app which tree-shaking is not able to remove will be removed with the Ivy compiler.

Amazing debugging

Ivy runtime has multiple types of tools to debug an app with ng object. It is easy to update the state as the developers can do it manually. Developers can now directly call for instances for directives, components, etc from Angular.

Better Testing

• By implementing TestBed into Ivy Angular has introduced a whole new revision in the TestBed.
• Ivy compilation makes the TestBed more efficient, the component needs to be overridden manually. Until then the compilation components between the tests will stop.

Completely new CSS class and Style Binding

• In earlier versions of AngularJS; style binding was one of the most complex tasks. The reason being; earlier when competing for the definition of the style used to cause while replacing each other.
• With Ivy; handling style is quite easy now, as it predictably enables the merging of style.

An effective way of catching the bugs

• Angular 9 has a new and improved compiler, it can effectively catch the bugs at the earlier stage only.
• Developers can leverage two main flags fullTemplateTypeCheck and strictTemplates to find the bugs in all types of applications.
  • fullTemplateTypeCheck is for checking everything within the template
  • strictTemplates enables the strictest types of system rules

Easy to read the build errors

With the new Ivy compiler reading the error messages is a lot easier in Angular 9. It helps in catching build errors with ease and also it provides stronger type safety in the code. 

Improvement in the Build Times

• Ivy complier brings around 40 percent improvement in the build times. As a result; AOT builds are faster than ever.
• For the first time, AOT is useful in dev-mode builds. With ngserve the developer can get the same compile-time checking when the same was used for the production builds.
• Also; entrycomponents are not required anymore because compiler and runtime automatically get discovered.

The ng update

• CLI gets updated automatically when the latest version is updated.
• Now with ng update, developers can get real-time progress update. Along with that ng update the migrations and leaves the changes for the developers for a thorough inspection as a result; debugging is also easier with ng update.

Component Harnesses

In Angular 9 developers have an alternate way to test the components. By abstracting the details of the implementation; Angular Material components can be tested from harnesses.

More Components

In all the cases of Angular app development, it is easy and possible to render YouTube Player and Google Maps.

Improvement in IDE

Angular IDE has received a major architecture update to handle major issues like stability and performance. Along with that; Angular language service extension is also updated with new features.

Here are the IDE changes introduced in the Angular 9

1. TextMate grammar feature to highlight external templates and syntax in inline
2. templateUrl and styleUrls go to definition
3. When the mouse has hovered over tool tip type information and ngmodule information is displayed

Google Search Trends for Angular Web Framework Versions

Now let’s have a look some of the

Highlighted Changes Introduced by Angular 9

Angular Translation

• The translations in Angular which were loaded via loadtranslations() now have to use MessageId for the translation key which was previously known as SourceMessage string.
• For the attachment of $localize function with the global scope import @angular/localize/init. It was earlier @angular/localize/.

Forms in the code

• Ngform which were

<ngForm>...</ngForm>

now changed to

<ng-Form>...</ng-Form>

• FormsModule.withConfig is replaced now with FormsModule directly withconfig. It is used to opt for below options:

opts: { warnOnDeprecatedNgFormSelector?: "never" | "once" | "always"; }

Angular Bazel

• With Angular 9, there is no need for @angular/ bazel ng_setup_workspace(). The developer just has to remove any calls to the rules_nodejs as well as the corresponding load statement.
• The protractor_web_test_suite in the @angular/bazel is now @bazel/protractor package.

No tslib dependency

With the earlier version of Angular, tslib has a part of the dependency. Even if a developer is not using Angular CLI, he/she will have to install this package.

Service Worker

In ngsw- config. JSON versioned Files property is removed from the coding.

Now let us have a look at the best advantages of migrating to Angular 9

Advantages of Angular 9

1. Mix of multiple configurations is possible now

• With the early versions of Angular overriding a configuration was a messy task.The developer was required to copy the configuration and then to use it if he or she has to make a whole new entry.
• But with new ng build –configuration=prod, testing a developer will only have to pass the configuration which is required to be overwritten.

2. ng add package specify options

• Angular 9 allows the author of the Angular library to specify if the ng add package should be in the dependencies or not.
• Here’s how it works

ng-add : { 
   "save": false | true | 'dependencies' | 'devDependencies'
}

3. The component schematic will have type options

• When a developer use ng g c user it automatically generates a file with the component class called user component.
• Now there will be a type option that will allow the developer to define which type of component he or she wants to create.
• Let us take an example; ng g c user — type=” dialog” will create a component that will have a class name User dialog.

4. No need of manually adding the interceptor

Until Angular 8 adding interceptor was a manual task; with Angular 9 a developer will have ng g i custom to generate CustomInterceptor class directly.

5. Optional HammerJS

• Earlier HammerJS was necessary for adding gesture support.
• Now with the latest version of Angular, it is optional also, all the internal implementations will be removed.
• A developer is allowed to use Hammermodule from the @angular/platform-browser.

6. Generate Schematics along with skipping the test

• Developers can generate an application with –minimal = true, this will skip the unit testing and e2e configuration.
• On the other hand, if a developer uses ng g for generating component/pipe/service it will add spec. ts file. With angular 9 there is no need for such messy configurations.

7. Improved i18n

• The early version of Angular used to have long supported internationalization. With the help of Angular CLI, developers can create standard codes for creating the translator file. This will result in publishing one app into different languages.
• Now this entire process has been refactored in Angular 9 to make the compile-time inlining.

Angular 9 Versus Angular 8

If you are looking for Angular 9 Advantages vs Angular 8 or previous versions then we have created a comparison of Angular 9 and Angular 8, because these two are the most important ones at this time.

Performance comparison for Small application

The universal tutorial website has conducted an experiment where they developed a small web app with very small information. They added dist folder sizes and some images of Google Lighthouse results along with the Package.json file.

Result:

• Angular 9 has produced 35% less build file sizes when compared with Angular 8.

• When multiple tests were conducted on the web app, Angular 8 scored an average of 84 out of 100, while Angular 9 scored 93 out of 100.
• On the other hand, on the desktop version, Angular 9 scored 99 and Angular 8 scored 95 out of 100.

Performance comparison in a real-world Angular App

The web app consisted of sign up and log in features along with pagination to load comments and feeds. 

Result:

• Angular 9 generated 7% less build file size when compared to Angular 8.
• When multiple tests were conducted in the mobile version; Angular 8 scored 69 out of 100 and Angular 9 scored 74 out of 100.
• Now when the tests were done in the desktop version; Angular 9 scored 93 and Angular 8 scored 92 out of 100.

TL;DR – Too Long Didn’t Read Version

Here’s the summary version of the entire article. We have covered all the important aspects which are important to know about Angular 9.

First, let’s have a look at the important Angular 9 features:

• Angular 9 will have the default Ivy compiler 
• Compressed bundle size 
• Faster app performance with less size of downloadable files
• Smart and Automatic Testing with the revised version of TestBed
• Multiple tools for debugging the app
• Easy way to catch the bugs of the app at the early stage
• Effectively handle the style binding
• Directly read the build errors
• Improved IDE.
• Real-time progress update for the developers

Secondly, we have discussed

some popular changes introduced in angular 9

• Translation in the Angular code
• New ways of adding forms in the code
• Better Angular Bazel package
• No more tslib dependency

We have also covered some

Advantages of Angular 9

• Effectively override multiple configurations 
• Specify options for the ng add package
• Type options in the component schematic
• No more manual process of adding the interceptor
• Optional HammerJS
• Easy to skip the test by generating the schematics
• Improvement in internationalization

Conclusion

As always Angular has introduced one more amazing update and Angular developers are all ready to migrate the apps to the latest version. There is no doubt that Angular 9 is going to introduce a revolution among the apps.

Are you looking for Angular 9 migrations for your web app or single-page app?

Our developers are all set to work on your project. Hire Angular Developers from Samarpan Infotech and our team of experts will help with the angular development services. We make sure that there will be no data loss in the entire migration process.

Related Angular Development Resources

1. Angular vs. React: Which is Better for Your Web Apps?
2. Top 10 Front-End Web Development Tools & Frameworks For 2020