Launched for the first time in 2009, Angular has finally released its latest version, Angular 9 on February 7th, 2020. Angular is the most popular Javascript framework, mainly responsible for developing front-end desktop web apps or single-page applications, giving rise to every Angular 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 progressive web development.
For developers across the globe, Angular is the first choice for the front end development. It thus becomes highly crucial for the team to fix bugs and modify the already existing framework. Hence, a new version of the angular release every six months.
So what's new in Angular 9? In this new update, all the existing drawbacks have been modified. 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!
Let's discuss IVY and all the Angular 9 features in detail, shall we?
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:
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!
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.
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.
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.
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.
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.
[style.color]="myColor"
[style]="{color: myOtherColor}" myDirective>
@Component({
host: {
style: "color:blue"
},...})
...
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
...
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.
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
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 Know more about IVY, what is ivy?
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.
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.
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.
Angular depends on many other services and libraries to function effectively which are usually difficult to maintain and update. In this new version, these libraries are tracked and updated using Bazel which detects the API landscape of these libraries, produce reports, find out missing updates or new features and documents in such a way that they are communicated easily.
This angular 9 feature provides us with some additional options while creating an @Injectable service in Angular.
platform— The providedIn: '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. 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();
});With Angular 9, another significant improvement is made to the Angular language service extension on the Visual Studio Marketplace. The Angular Essentials extension includes a set of useful extensions to build up the development experience with Angular. One such code is Angular Language Service, which adds a lot of features to VS Code. This helps us write our Angular code. Other extensions include useful Angular snippets, ESLint, and debugging extensions. Along with increased performance and stability issues, many long-standing bugs have also been fixed in this Angular 9 feature.
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.
In order to update the Angular CLI to latest version 9, one needs to follow the below steps:
npm install --no-save @angular/cli@^8.3.1This 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/
A key goal of Angular 9 is to make the available for all apps. The main benefit of Ivy is to reduce the size of applications for better user experience.
With the advent of Angular 9, the community can benefit from smaller, high-performance applications. This will result in better developer experience. Developers also now have clear insight into the syntax and the project structure.
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.
Read More : Version 10 of Angular Now Available — TypeScript 3.9, faster builds, and more
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
