Angular 9 : Top New Features and How to Upgrade

Angular 9 : Top New Features and How to Upgrade

In this article, we will learn new features of Angular 9? And the changes that Ivy brings.

Angular is one of the most prominent open-source frameworks for building web and mobile applications. Developed by Google, Angular has evolved over the years into a comprehensive development framework that includes all of the tools and components required to build a web app. Angular follows a clear roadmap, with a new major version of Angular released every six months.

For months now we have been watching the Angular development team closely, waiting for updates and counting down to the big release. Now, the wait is finally over. Angular version 9.0.0 is officially here. Angular 9 is a major release that adds a number of changes to the ecosystem.

The most notable change is Ivy. With the release of Angular 9, Ivy is now the default compiler and runtime. Ivy improves bundle size, allows for better debugging, adds improved type checking, faster testing, enables the AOT compiler on by default, and improves CSS class and style binding.

With Ivy, both small apps and large apps will see largely improved bundle size savings thanks to Ivy’s tree-shaking feature, which will eliminate dead-code.

In this article, we will learn new features of Angular 9? And the changes that Ivy brings.

New Feature in Angular 9

1. Ivy By Default

One of the biggest improvements to Angular coming in 9.0 is that Ivy is enabled by default. Ivy is Angular’s new renderer. A super high level overview is that Ivy enables apps to only require pieces of the render that they actually need, instead of the whole thing. This means that our final output will be smaller, which is always better for performance. It’s important to note, that Ivy won’t make your components/app significantly smaller if you’re using every feature available to Angular. But there are noticeable improvements to the main.js chunk of an app.

For comparison, let’s look at the build output from Star Track with Ivy enabled and with it disabled. We’ll compare the size of the main.js file, which is mostly going to be Angular specific code.


# Ivy disabled
$ ng build --prod
...
chunk {10} main-es2015.d03d9cadf1579320f520.js (main) 537 kB [initial] [rendered]
chunk {10} main-es5.d03d9cadf1579320f520.js (main) 628 kB [initial] [rendered]
...


# Ivy enabled
$ ng build --prod
...
chunk {10} main-es2015.bfc9e260b847bc2b02fc.js (main) 465 kB [initial] [rendered]
chunk {10} main-es5.bfc9e260b847bc2b02fc.js (main) 551 kB [initial] [rendered]
..

From 537kb/628kb without Ivy, to 465kb/551kb with it! Note that Star Track is using almost every feature available from Angular, so delta is a bit smaller, but still a welcomed improvement!

Now Ivy has been around for sometime in earlier release, but always as an opt-in feature. With 9.0, however, Ivy is enabled by default and developers need to opt-out manually. If Ivy is so great, why would developers need to opt-out of it? Well, as this is part of a new major version, there are bound to be some breaking changes here and there. Most of these are not change that app developers need to worry themselves with, but something that component authors would need to deal with. If you’re using third-party components/packages that have not updated, you’ll want to opt-out of Ivy for now, and open an issue (or better yet, a pull request) against the repo.

Ionic itself will be ready for Ivy when Angular 9.0 is shipped. I’ve been following along and making the necessary updates needed. We recently have merged a pull request and have been testing a build of Ionic and Angular 9.0.

2. Angular Core Type-Safe Changes

One of the APIs for testing Angular apps is called TestBed. Before this new version, it had a get function called TestBed.get() that stopped taking string values after version 8. This was a breaking change, which the team decided to rollback in this new version as it was a very impactful breaking change. To solve the type safety problem, the team came up with a solution called TestBed.inject() and deprecated the get function.

TestBed.get(ChangeDetectorRef) // any

TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef

Now the TestBed API has been improved so that the inject function does exactly what the get does, while being type-safe at the same time.

3. ModuleWithProviders Support

This is mostly for library owners. If you have used ModuleWithProviders before Angular 9, you may or may not have been strongly typing it, but now in this version you have to always use the generic ModuleWithProviders<T> type to show your module type. Your declaration might have been looking thus:

	
@NgModule({ ...}) export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}	
	

Now, this is how they should look:


@NgModule({ ...})  
export class MyModule {  
  static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>  
{  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}


Do not worry about migrating the code yourself. After you have updated to version 9, your codebase will be automatically migrated. This also applies to all migration schematics, as soon as you update with the command:

ng update


All of your code becomes in sync with the latest changes.

4. Changes with Angular Forms

There are a few form changes you should be aware of in this new Angular version. The first is that the <ngForm></ngForm> is no longer a valid selector to use while referencing an Angular form. You can use the <ng-form></ng-form> instead. Also the warning for using the removed form tag has been removed too. Secondly, the FormsModule.withConfig has been removed and you can now use the FormsModule directly.

5. Dependency Injection Changes in Core

For dependency injection, the new version of Angular also comes with a little improvement. This is not such a big change, but some support has been added for the providedIn value section of dependency injections.

@Injectable({    providedIn: 'platform'  })  class MyService {...}


Scopes like platform and any have been added to the library of values for the providedIn property.

6. Enhancement of Language Service

The language service support for integrated development environments like VS Code and WebStorm has been further improved with this new version. Now, definition of links will become more consistent, and even definition for style URLs will now be checked as template URLs. Even the URLs that do not point to actual project files will now be diagnosed.

Also Diagnostics improvements like TypeScriptHost will now be able to differentiate severity logging by debug methods and errors. A convenience script has now been added to this new version too to help with building and testing scripts.

7. Service Worker Updates

In this new version, for service workers the deprecated versioned files option in the service worker asset group config has been removed. This means that your ngsw-config.json file that looked like this:



"assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "versionedFiles": [  
        "/**/*.txt"  
      ]  
    }  
  }  
]

Would now look like this:


"assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "files": [  
        "/**/*.txt"  
      ]  
    }  
  }  
]


8. i18n Improvements

Angular as a JavaScript framework has long supported internationalization, and with the Angular CLI you can generate standard codes that would help create translator files so that your application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier to add compile-time inlining.

9. API Extractor Updates

Angular is a holistic framework and so depends on many other services and libraries to function effectively. There is, however, the problem of keeping up with updates for all these libraries and services, resolutions and new features. In this new version of Angular, these libraries will be tracked and update the API Extractor to the newest version, where it uses Bazel at every build time to detect the API landscape of these libraries, produce reports and fish out missing updates or new features and documents in such a way that they would be communicated to you easily. This makes it easier to handle maintenance and keep everything up to date.

10. Angular Component Updates

For the CDK, there is an update about Hammer.js, which helps to add gesture support and was required if you wanted to use the CDK. Now it is optional. You can import it though optionally with this command:

import `HammerModule` from [@angular/platform-browser]


There is a clipboard module that shipped with this new version too, available in the CDK family. There is also a new Google Maps package finally available in this new Angular version, called the @angular/google-maps package.

From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

11. Updating to Angular Version 9

For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at update.angular.io.

12. Updating CLI Apps

If your application uses the CLI, you can update to version 9 automatically with the help of the ng update script:


ng update @angular/[email protected] @angular/[email protected]  
git add .  
git commit --all -m "build: update Angular packages to latest 8.x version"  
ng update @angular/cli @angular/core --next`

This article is the end, that's all the new features in Angular 9 I want to share with you. If you find the article useful, please share it with everyone.
Thanks for reading !

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Hire Now: https://bit.ly/394wdOx

Important reasons for developers to adopt Angular JS development

 Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular has been a top choice for web development and it's the latest version AngularJS has gained popularity in the industry. This java script framework has created its prominent position in creating web apps.
Regardless of whether there are numerous different systems accessible for web development, AngularJS can support among them all. Since its introduction in the market, Angular has been creating waves in the market.

Introduction

Angular js is a powerful framework that was developed by Google. It is used to build dynamic apps with power-packed features. It was first introduced in 2010 and created by developers at Google. This framework was created to simplify and remove the challenges in creating dynamic apps. It uses HTML, CSS, and java script to create dynamic single-page applications. Angular Js is inclusive of Mongo DB and it is a frontend fragment of Mean Stack. In the developer's community, Angular is considered as a reliable and fast Java script framework. Many popular apps like PayPal. You tube, Netflix, the guardian, Lego are built using the AngularJS framework.

In this blog, we are listing some compelling reasons to pick angular development to familiarize you with its potential

• Open-source framework: It is not a library but open-source frameworks that enable the developers to build well-performing single page web applications. Just after its launch, it became hugely popular among the developers and it is not going to come at a halt.

• Simplified MVC structure: Developers use AngularJS to build robust and interactive web applications. AngularJS framework uses MVC architecture to create interactive applications. AngularJS makes it easy for developers to create apps as they are only required to split the applications.

• Extensive community: As angular is built by Google, it is backed by a very large community of professionals. The Angular JS conferences of the professionals are held all over the world. Hackathons are also organized in IT communities that include some professional and skilled engineers who can help with the queries and questions related to Angular.

• Declarative code system: In Angular JS developers can create declarative patterns by using declarative paradigms. It enables developers to be less heavy, and easy to read. In this framework, the developers get data models that are not too complex to write that abolishes the need to use any getter/setters and with easy data manipulation.

• Two-way data binding: It is one of the impeccable features that makes Angularjs popular in the developers' community. It allows seamless projections of the models and data binding. In this framework, any changes in the user interface make an impact on the application objects. The developers are not required to fresh the cycle and that makes it vulnerable to bugs.

• Using directives: AngularJS makes use of Directives as the developers can build custom HTML tags that function as custom widgets and it can be possible using directives. Its implications are also in the case of the use of decorating components and manipulation of DOM elements in appealing ways.

• Enterprise-level testing: When using Angular JS there is no need for demanding any other supplementary framework or additional plugins. In the process, parts of applications are put in the angular framework which is not too complex for manipulation. In module separation, developers can load essential services in an effective way for the performance of automatic testing.

• Client-side situation: AngularJS mainly works at the client-side and it is fully compatible with both web and mobile browsers. It can function with any projects without the need for any backend notifications. The developers can easily use AngularJS for the front end of applications.

• Easy to use: AngularJS is rich with its features and facilitates developers to reduce any need for writing codes. It reduces the burden of developers by the application of MVC architecture and data models.

Many other significant features make AngularJS prioritize by the developers than other Javascript frameworks. The above-mentioned reasons have made it the top choice for reputed companies all across the globe for web development. Developers at the company master the skills to work with Angular JS development for web. The company is equipped with dedicated professionals having sound technical knowledge of working with AngularJS. We offer offshore services to extend our reach all across the globe with various models. We have more than 15 years of experience in the industry that we use to deliver high-quality solutions by leveraging the latest technology and quality standards.

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company