Top New Features Of Angular 9
Angular launched the first time in 2009, It has finally released its latest version, Angular 9 on February 7th, 2020. New Features of Angular 9 Angular is one of the very popular Javascript frameworks, and should mainly responsible for developing front-end desktop web apps or a (SPA)single-page applications, It is giving rise to every Angular Web Development Company in the world. It is 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 progressive web development.
For developers all over the world, Angular is the first choice for the front end development. So it becomes very important for the team to fix bugs and modify an existing framework. So, a new version of the angular release every six months.
Angular 9: Features and Fixes
So what’s happening in Angular 9? Right now? In this new update, all the current drawbacks have been adjusted. 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 group is doing to settle the enormous size of the last packages? Enter Ivy!
Let’s discuss IVY and all the Angular 9 features in detail, shall we?
Default Ivy compiler
Angular 9 consolidates an adjustment in the core structure of the entire framework. All the applications will utilize 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 probably going to diminish by 25–40 percent dependent on the application size. Small apps benefit the most from the tree shaking feature of IVY as they have to Littler the packs, better the exhibition. On account of Ivy!
Faster mobile apps
Cell phones get half of the site traffic all-inclusive. A lot of clients originate from places where there are moderate web associations. Henceforth, it is significant for Angular 9 Developers to update and diminishing the size of downloadable records, to build a versatile client experience. By diminishing the size of JavaScript packs, Ivy opens a stage for designers to accelerate the application.New Features of Angular 9
Allows for better debugging
Debugging is one of the many features of IVY compiler and runtime. For Web 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 articulations and ties inside the formats of the application and reports any sort of blunders it finds. The bugs are gotten and fixed right off the bat in the advancement procedure. The Angular 9 at present has three methods 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 an anticipated way. In the past adaptations, if an application contained contending definitions for a style, those styles would supplant one another. With this Angular 9 feature, one can manage styles through a clear, consistent order of precedence which is not dependent on timing.
[style.color]="myColor"
[style]="{color: myOtherColor}" myDirective>
@Component({
host: {
style: "color:blue"
},...})//Appfinz Technologies
...
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
...Improved build errors
The new compiler Ivy isn’t just effective yet additionally provides safety. Ivy accelerates our build times fundamentally. It gives less time for the works to finish. This enables all the mistake messages simpler to read and execute the needful.
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. andng serve. These components in Angular 9 will compile automatically depending on their usage.
Selector-less directives in Ivy
Selector-less orders as base classes were at that point bolstered in the old ViewEngine yet were absent in the Ivy preview in Angular 8. This has now been added to Angular 9.
Improved Internationalization (i18n)
Internationalization is a significant Angular 9 component. The new arrangement shows up with Angular 9 which adjusts a large portion of the disadvantages without losing execution. 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 factors were not referred to in the layout’s related part. Making these phantom factors can, as a rule, compromise our applications. With Angular 9 one gets a compiler mistake when a format variable is made that has not been characterized in a segment.
More reliable ng update
The ng update performs a basic update to the current stable release of the core framework and CLI by running the following command. Further updates have been made to this to make it more reliable and informative. The updates will now use the latest CLI and take advantage of newer updates automatically. It will also give updates and information about each migration.
This new angular 9 feature also comes in with the new --create-commits flag. When we run ng update --create-commits, the tool commits the state of our codebase after each migration, to debug the changes made to the code.
API Extractor Updates
Angular relies upon numerous different services and libraries to work effectively which are typically hard to keep up and update. Right now, these libraries are followed and refreshed using Bazel which recognizes the API scene of these libraries, produce reports, discover missing updates or new highlights and records so that they are conveyed easily.
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 element is to offer an elective method to test components. By disconnecting the implementation details, one can ensure that the unit tests are accurately evaluated and less fragile. Angular 9 is making tackles accessible to any segment creator as a major aspect of the Component Dev Kit (CDK). In Angular 9, changes have been made to the compiler and runtime, thus we never again need to recognize 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();
});IDE and language service improvements
With Angular 9, another noteworthy improvement is made to the Angular language service extension on the Visual Studio Marketplace. The Angular Essentials expansion incorporates a lot of valuable augmentations to develop the improvement involvement in Angular. One such code is Angular Language Service, which adds great features of highlights to the VS Code. This encourages us to compose our Angular code. Different extensions incorporate helpful Angular pieces, ESLint, and debugging extensions. Alongside expanded execution and dependability issues, some long-standing bugs have likewise been fixed right now highlight.
Typescript 3.7 Support
Typescript 3.7 released on November 2019, gave a significant upsurge to new angular 9. The angular 9 is updated to work with TypeScript 3.6 and 3.7. The Nullish combining and discretionary tying highlight of the Typescript 3.7 assists stay in sync with the environment. To top everything, Angular 9 will bolster the use of a similar TypeScript Diagnostics format for the TypeScript Compiler diagnostics, which will produce progressively clear mistake 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.
- After updating angular cli to version 8 and above, use the below command to update angular cli to version 9
ng update @angular/cli @angular/core
While 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
A key objective of Angular 9 is to make the accessible for all applications. The primary advantage of Ivy is to reduce the size of utilizations for the better client experience.
With the appearance of Angular 9, the community can profit by smaller, elite applications. This will bring about a better developer experience. Developers additionally now have a clear knowledge of the syntax and the project structure.New Features of Angular 9
Later in, the Angular Developer Group is probably going to take a shot at creating components and directives. The Angular team has informed us that there won’t be any requirement for a significant API change. Propelled designer experience is continually something to anticipate. An article on InfoWorld by Paul Krill uncovers that Angular 10 has a deadline set for a May 2020 discharge. We should hold on to check whether that is valid.
About Post Author
