Top 10 Features of Angular 9
Launched for the first time in 2009, Angular has finally released its latest version, Angular 9 on February 7th, 2020. Angular has aged gradually throughout to become one of the most popular Javascript frameworks. It is mainly responsible for developing front-end desktop web apps or single-page applications, giving rise to every AngularJS Development Company in the world. Backed by Google, Angular has been evolved over the years into a fully grown and well-developed platform. The consolidated collection of ideas is much needed for a much efficient for web development.
For developers across the globe, Angular is the first priority for front end developments. It is highly crucial for the team to fix bugs and modify the already existing framework. Hence, a new version of angular is released almost every six months. In this new update, all the existing drawbacks have been modified.
let’s discuss the Angular 9 features in detail, shall we?
Angular 9: Features and Fixes
A lot of factors have affected the previous versions of Angular. For example, large bundle files that have negatively impacted download times, application performance and user experience. So what the Angular team is doing to solve the large size of the final bundles? Enter Ivy!
Default Ivy compiler
Angular 9 incorporates a change in the core structure of the entire framework. All the applications will use the IVY renderer as the default compiler. Apps built with IVY are more efficient. To top it all, the IVY compiler in Angular 9 fixes several bugs and has additional features to it as well. Let’s see how:
Improves the bundle sizes
In this Angular 9 feature, the bundle sizes are likely to decrease by 25–40 percent based on the app size. Small apps benefit the most from the tree shaking feature of IVY as they have to generate less code for the angular components. Smaller the bundles, better the performance. Thanks to Ivy!
Faster mobile apps
Mobile phones fetch half of the website traffic globally. A considerable amount of users come from places where there are slow internet connections. Hence, it is important for Angular 9 developers to redesign and decrease the size of downloadable files, to increase the mobile user experience. By reducing the size of JavaScript bundles, Ivy opens a platform for developers to speed up the application.
Allows for better debugging
Debugging is one of the many features of IVY compiler and runtime. For developers, it is difficult to develop a program that is completely bug-free. That is why it is important to equip the codebase with tools and techniques to flesh out the bugs themselves. The Angular framework in Angular 9 uses some unique techniques and tools to debug its applications. With these:-
-one can ask Angular for access to instances of the components and directives.
-can trigger change detection with applyChanges
-one can manually call methods and update state.
Adds improved type checking
The Angular compiler checks the expressions and bindings within the templates of the application and reports any type errors it finds. The bugs are caught and fixed early in the development process. The Angular 9 currently has three modes of doing this. Apart from the default flag, the other flags that the angular supports are:
fullTemplateTypeCheck- By activating this flag, the compiler will check everything within your template (ngIf,ngFor,ng-template, etc)strictTemplates- By activating this flag, the compiler will apply the strictest Type System rules for type checking.
Have a look at the Template type checking guide in the documentation.
Faster Testing
The implementation of the TestBed in Ivy, makes it more efficient to arrange the components between tests. This avoids recompilation between the grand majority of tests. With this change, the framework's core acceptance tests are about 40% faster. User's own application test speeds will be around 40-50% faster.
Improved CSS class and style binding
The Ivy compiler and runtime handles style in a predictable manner. In the previous versions, if an application contained competing definitions for a style, those styles would replace each other. With this Angular 9 feature, one can manage styles through a clear, consistent order of precedence which is not dependent on timing.
The new compiler Ivy is not only efficient but also provides safety. Ivy speeds up our build times significantly. It gives less time for the builds to complete. This enables all the error messages easier to read.
Enables the AOT compiler on by default
In the new IVY architecture, we see a significant change in the compiler’s performance. This means that the AOT builds will be noticeably faster. The change in the compiler and runtime, would no longer require entryComponents. and. These components in Angular 9 will compile automatically depending on their usage.
Selector-less directives in Ivy
Selector-less directives as base classes were already supported in the old ViewEngine but were missing in the Ivy preview in Angular 8. This has now been added to Angular 9.
Improved Internationalization (i18n)
Internationalization is an important Angular 9 feature. The new solution appears with Angular 9 which balances most of the drawbacks without losing performance. Initially, the latest @angular / localize produced one building, followed by a translation of texts consolidated in a copy and Ivy makes it easier to carry out the whole process. Know more about IVY, what is ivy?
The Phantom Template Variable Menace
Initially, phantom variables were not cited in the template’s associated component. Creating these phantom variables can usually threaten our applications. With Angular 9 one gets a compiler error when a template variable is created that has not been defined in a component.
New options for ‘providedIn’
This angular 9 feature provides us with some additional options while create an @Injectable service in Angular.
platform- TheprovidedIn: 'platform'makes the service available in a special singleton platform injector that is shared by all applications on the page.any- Provides a unique instance in every module (including lazy modules) that instills the token.
Component Harness
Another Angular 9 feature is to offer an alternative way to test components. By disconnecting the implementation details, one can make sure that the unit tests are correctly audited and less frail. Angular 9 is making harnesses available to any component author as part of the Component Dev Kit (CDK). In Angular 9, changes have been made to the compiler and runtime, and so we no longer need to identify this in the entryComponents array. Angular will find the component by its own. However, Angular will not remove the component from the entryComponents array by itself for us. Hence we need to search our code after updating and manually remove them and then test.
it("should switch to bug report template", async () => {
expect(fixture.debugElement.query("bug-report-form")).toBeNull();
const select = await loader.getHarness(MatSelect);
await select.clickOptions({ text: "Bug" });
expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});Typescript 3.7 Support
Typescript 3.7 released on November 2019, gave a major upsurge to new angular 9. The angular 9 is updated to work with TypeScript 3.6 and 3.7. The Nullish coalescing and optional chaining feature of the Typescript 3.7 helps to stay in sync with the environment. To top it all, Angular 9 will support usage of the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics, which will generate more descriptive error message.
Updating Angular 9 from Angular 8
In order to update the Angular CLI to latest version 9, one needs to follow the below steps:
- Make sure you are using Node 10.13 or later. Although, it is recommended to use Node 12.
- First update the local angular cli to version 8.3.17 or 8.x version with the below command.
npm install --no-save @angular/cli@^8.3.1
This command will update our @angular/core and @angular/cli in our package.json for our project.
ng update @angular/cli @angular/coreWhile the update is on, there will be messages telling us exactly what the CLI is updating. It will also tell us which files were modified.
To know more about the how and why to upgrade to Angular 9, follow https://update.angular.io/
Future of Angular 9
In the future, the team is likely to work on developing components and directives. The Angular team has notified that there won’t be any need for a major API change. Advanced developer experience is always something to look forward to. An article on InfoWorld by Paul Krill reveals that Angular 10 has a target date set for a May 2020 release. We will have to wait to see if that is true.
Originally published at https://www.angularminds.com on February 19, 2020.
