Angular 10 – What You Must Know About It

Angular has recently released a new version on 24th June, 2020. It rolled out only after 4 months of releasing version 9.0 of Angular. The latest Angular 10 is a beta version – which means that the Angular team is nearing the final release of the latest version of this Google-developed, typescript-oriented framework.

If you are a web developer or someone looking to develop a web app for your business, you must know what this new version has to offer. Since the beta version is rolled out within 4 months of releasing the last version, you may wonder whether it’s a hit or miss! We are here to help you find the answer. Let’s take a closer look at the key features of Angular 10.

Features of Angular 10

Though Angular team has maintained that the latest version will mainly focus on the quality tools and ecosystem instead of introducing a plethora of new features, we have conducted an extensive study and brought to you a comprehensive list of the value offerings you can expect from the version. Let’s check it out then.

• New Date Range Picker

Angular Material UI Component Library is now equipped with a new date range picker. Not sure what it is? A date range picker can be attached to the web pages. It pops up calendars for selecting times, dates, or any predefined time period like “past 20 days”.

If you want your users to select a range of dates instead of just a single date, you may use mat-date-range-picker and mat-date-range-input components.

• Optional Stricter Settings

Angular 10 has a stricter project setup while creating a new workspace with ng new. Once you enable this flag, it will introduce a few new settings in your project like improving maintainability, allowing the CLI to perform an advanced optimization in your application, helping to catch bugs ahead of time, and so on.

Here’s a basic work scope of the strict flag:

-Turning template type checking to Strict
-Enabling strict more in TypeScript
-Configuring linting rules to prevent the usage of “any” as a type declaration
-Reducing default bundle budgets

• Warnings about CommonJS Imports

Using a dependency packed with CommonJS makes the bundles large and thereby slows down the application. Angular 10 warns the developers once a build pulls in one of such bundles. That way, they can let their dependencies know that they would prefer an ECMAScript module (ESM) bundle.

• Updates

A few major updates have been brought to the dependencies of Angular so as to synchronize with the JavaScript ecosystem. These are as follow:

-TypeScript is updated to TypeScript 3.9. It helps the team to work on improving performance and stability.
-TSLint is updated to v6
-TSLib is updated to v2.0

The project layout has also been updated. Therefore, you can see a new tsconfig.base.json file in Angular 10. This file better supports IDEs, build tool resolve type, and package configurations.

Other than these, the latest Angular version empowers things like accelerating the compiler, editing experiences, prompt fixes, and completions.

• Improved ngcc Performance

This Angular 10 feature promotes an implementation of a programme-based entry-point finder. This can process the entry points where only a tsconfig.json file defined programmes can reach. Further, dependencies are hidden inside the entry point exhibit and can be read without being computed every time.

The base path of each package along with the entry points need not be stored in the file. Therefore the applications need not store unnecessary empty arrays. This feature helps to manifest and reduce the file size at the entry point, even for the large node modules. This significantly boosts performance.

• Merging Multiple Files

The latest Angular version supports the merging of multiple translation documents without any hassles. In the previous versions, these could load only one file. Now users can specify multiple documents per locale and the transactions from all the files can be merged by a messaging ID. The most essential document will be put first with fallback translations later.

• Async Locking Timeout

Yet another interesting thing about Angular 10 is that Async locking timeout is configured in this version. This supports the ngcc.config.js file in order to adjust the retry delays & retry attempts in AsyncLocker. An integration test enables the developers to monitor the timeout, use the ngcc.config.js file to reduce the timeout span and prevent the test from taking a long time. No wonder that web application development company professionals are welcoming the latest Angular version with a huge relief!

• Router

The CanLoad guard can go back to UrlTree in the latest Angular version. The CanLoad guard returning UrlTree nullifies any cutting-edge navigation and in turn, helps to redirect. This matches the current behaviour with the available CanActivate guards – these are also added here. However, this doesn’t produce any impact on preloading.

• Compile

Ahead-of-Time (AOT) compiles an app and its libraries at the build time. This is a common practice since Angular 9. It can convert the codes during the build time even before the browser downloads and subsequently runs that code. Naturally, this ensures a faster rendering in the browser. The compiler eliminates separate AJAX requests for the source files by inlining external HTML templates and CSS style sheets within the application JavaScript.

There are some evident changes made in the AOT in Angular 10:

1. Its incremental compilation helps to reach better build times
2. With a generated code highly compatible with tree shaking, it can reach better build sizes
3. The version enables you to explore several new features like lazy loading of the component instead of modules, metaprogramming or higher-order components, the latest change-detection system that’s not based on Zone.js, etc.

• Bug Fixed

In this version, a number of bug fixes have been done. These include removing any unaddressed instance of the range in the compiler, resolving migration-related errors while importing a nonexistent symbol, identifying the modules affected by overrides in TestBed, and others. Moreover, there’s also a workaround in the core for fixing the Terser Inlining bug.

• Better Community Engagement

Angular already has a large global dev community who consistently provide value offerings for Angular projects through the entire spectrum. Recently the organization itself is planning to adopt strategies and making an investment to power-up the community and make the platform even better.

• Deprecations & Removals

The Angular Package Format doesn’t include FESM5 or ESM5 bundles anymore. This lets you save 119MB of downloading and installation time while running yarn or npm install in Angular libraries and packages. These formats can be discarded since any down-levelling to assist ES5 is conducted at the end of the development process.

Further, Angular organization has deprecated any support for older browsers like IE9, 10, and Internet Explorer Mobile.

• Other Changes

Angular 10 brings some groundbreaking changes. For instance, Logic is updated in correspondence to formatting day periods that extends beyond midnight. If your application uses either formatDate or DatePipe or even the b and B format codes, it will be affected by this change.

Another change is that any resolver which returns EMPTY will cancel the navigation. The developers have to update the resolvers with some specific value like default!Empty.

Angular NPM doesn’t contain a few jsdoc comments to support the advanced optimizations of Closure Compiler. Those who use Closure Compiler should better consume Angular packages built directly from sources rather than consuming the versions published on NPM. For a temporary time, users can use their current build pipeline.

In this version, Vary headers are overlooked during retrieving the sources from ServiceWorker caches. This results in retrieving the sources even if their headers are not similar. If an application has to differentiate its responses based on the request headers, make sure that the Angular ServiceWorker is configured to avoid caching of any affected resource.

The warnings about any unknown elements are now noted as errors. This won’t break your app, but it can actuate tools that expect to be logged through console.error.

How to Update to Angular 10

To upgrade to the latest version of Angular, you may use the following command:

ng update @angular/cli @angular/core

Here’s a definitive guideline on updating to Angular version 10. However, without tech expertise, the command may not be of any use. Engage professional Angular development services to successfully update to Angular 10.

Conclusion
All the convenience offered by Angular 10 perhaps convinced you to upgrade your app framework version. Trust us, it’s worth the effort.