What’s Fresh at Angular 10? Features of Latest Angular Update

6 min readDec 16, 2020

The development team of Angular releases two versions of it every year. Being a product of Google, Angular is very popular and trustworthy which makes its all versions very reliable. Web app development companies wait for Angular to launch new versions with the latest and improved tactics that can be used to provide unexpected results to the users. There are around 97k websites all around that world created using AngularJS. And now, to increase this number and provide new updates to the users, Angular 10 has been launched.

Angular 10 came to life on 24 June 2020 but this time with the beta version. It is a Google-developed framework based on TypeScript. This version focuses on quality tools and ecosystem. In this blog, we will have a look at the new and updated features Angular 10 has come up with for the IT market.

What is Angular?

Angular is nothing but a framework that is used by app development companies to create dynamic web apps. It allows the developers to use HTML as the template language and also enables them to extend the HTML’s syntax to express the components of the application. In addition to this, AngularJS comes up with data binding and dependency injection that eliminates the requirement of writing long codes.

Angular minimizes the impedance mismatch between what an app requires by developing new HTML constructs and document-centric HTML. It teaches the browser a syntax that helps in calling directives. For instance -

DOM handles structures for showing, hiding, and repeating DOM fragments.
Data binding
HTML grouping
Support for form validation and forms

Why use Angular?

Angular enables the developers in creating dynamic web apps and single-page apps (SAPs). With the use of AngularJS, one does not need to rely on third-party libraries for creating applications. This framework has multiple benefits like -

Supported by Google
Declarative UI
Plain Old JavaScript Object
TypeScript
Simplified Model-View-Controller (MVC) Pattern
Code Consistency
Modular Structure
Easy to Maintain

How to install Angular CLI 10 to your system?

To install Angular from scratch and create a new project, the AngularJS developer can follow these steps.

The first step is to install the latest version of Angular CLI. Let’s install Angular CLI 10, the newest version on your machine. To do so, run the following commands -

npm install -g @angular/cling new test-app-projectcd test-test-projectng server

2. Now, in the new command-line interface, run the command -

$npm install -g @angular/cli (this command will install angular/cli v10.0.0.0.0)

3. Then to create a new Angular project, run the following command in your terminal.

$ cd ~$ ng new angular 10- project

In the above command, the angular10- project is your project’s name.

What new features Angular 10 has come up with?

1. Browser Compatibility

When we have a look at the history of Angular, it supports many browsers to ensure the best performance and results. However, the new Angular 10 has updated the browser configuration for new projects to outdo the older browsers. Because of this, the ES5 builds are disabled by default for the new projects. To enable the ES5 builds in the new projects of Angular 10, the Angular development service providers need to add essential browsers in the .browserslistrc file.

The list of New Browsers that are compatible with Angular 10 are -

Chrome — the latest version
Edge — the two most recent versions
Firefox — latest and ESR
Safari — the two most recent versions
iOS — the two most recent versions
Android — Nougat(7.0), Oreo(8.0), Pie(9.0), X(10.0)

2. TypeScript Compatibility

Angular 10 supports TypeScript 3.9. TypeScript is nothing but a language built on JavaScript with the syntax for annotations and type declarations. This is used to type-check the code with the help of the TypeScript compiler. Therefore, readable JavaScript is cleaned.

Besides this, TypeScript can help in saving the files with rich editing capabilities. The TypeScript 3.9 gave polish, stability, and performance to Angular. TypeScript is used for error-checking and quick fixing, completions, and speeding up the editing & compiling experience.

3. Performance

When we talk about Angular, it is known for the app performance that it provides to make the app successful. Angular 10 is the improved version that enables one to simply observe the boost in performance. Besides this, the type-checking performance boost is affected by the compiler-cli.

With Angular 10, the performance has become better as the size of the entry point has been reduced. Also, the caching of dependencies is done with the entry point.

4. Bug Fixes

With Angular 10, the app development team can fix more issues than before as now there are several bug fixes produced along with the compiler that prevents ambiguous expressions. The new and improved bug fix ensures proper identification of modules. These modules are affected by overrides in TestBed.

5. Date Range Picker

Angular 10 has modified the logic related to syntax day periods. In this syntax, the midnight crosses have been modified. The usual AM scenario in the daytime logic has been updated to match the midnight extending the time within the period of daytime. This renders the correct output. It might impact the programs that use DatePipe or formatDate() codes.

6. Angular NPM

The new update in Angular NPM no longer involves any jsdoc commentaries to favor advanced modifications of Closure Compiler. The Closure Compiler was unstable and lacked packages for some time before Angular 10. In addition to this, everyone who uses it is best for using Angular packages that are created from the sources rather than the NPM versions.

7. Router

The new update of Angular in Router enables CanLoad guard to transfer Urltree. Angular 10 is the reason behind the re-returning of Urltree CanLoad guard. This redirects and cancels the current navigation. All of this has been introduced to CanActivate guards and the best thing is that it doesn’t impact the preloading. Besides this, preloading is prevented by CanLoad.

8. Async Locker Timeouts

To activate Async, timeouts can be programmed. It basically includes the support for setting the retryAttempts, retryDelay, and AsyncLocker options to ngcc.config.js script. The Angular app test includes a new timeout function that uses the ngcc.config.js script to shorten the timeout. This function enables one to avoid the testing procedure that lasts long.

9. Localization

Localization is a feature that has seen one of the best updates with Angular 10. This new version of AngularJS offers to merge multiple documentation that was only able to load one file in the previous version of Angular. Now the users are able to define files as per their messaging ID and location.

10. EMPTY return of resolver

Whenever the resolver returns EMPTY, it cancels the navigation in another update. So if the AngularJS developer wants to continue the navigation, then they need to update the resolvers and make some changes by making it default.

11. NGCC

Angular 10 has brought the implementation of a program-based entry-point. It is designed to process the entry points that can be reached using a program specified by a file called tsconfig.json. With this, the AngularJs developers can catalyze the process with few dependencies installed with entry points that can be imported into the application. This entire process is carried out to reduce the size of the file at the entry point.

12. Core

The core update in the features of Angular 10 is interesting. In the new Angular, all the warnings will get logged as errors and will not break the working of an application. It definitely will game up the tools that accept nothing but to get logged in using the console. error.

Besides this, generic is made to be compulsory for ModuleWithProviders in Angular 10. This is done to work with the rendering pipeline and Ivy compilation. It ensures that if the Angular development company uses View Engine then no error will be issued.

13. Deprecation

The new version of Angular supports TypeScript 3.9 and has deprecated the involvement of FESM5 or ESM5 which helps in saving 119MB of download and also install time while running npm.

Conclusion

As seen above, Angular 10 has brought some interesting updates and features that will enable the developers to create a user-friendly, robust, and unique web application. Besides the above-listed features, Angular 10 also provides functionality to decorate the undecorated groups. It enables the Urlmatcher form to represent a break-up adjustment that returns a null value. By observing these latest features, if one wants to have a website for their business, there is no doubt in which technology to choose.