Top Features in Angular 10

In this post we will look at an overview of this latest version of Angular, v 10.0.0, and all the changes and deprecations that it shipped with.

Angular, Google’s JavaScript (TypeScript) framework for building web applications mobile or desktop, has over 55,000 stars on GitHub. Maintained by the Angular Team at Google and a host of community members and organizations, Angular Version 10 was released this spring officially.

Ivy

A few months ago, just as the pandemic started, one of the most anticipated things in the Angular community happened: The Angular platform released the Ivy renderer and made it the default engine for compiling. That version of Angular, 9.0.0, was the first major release of Angular after Ivy was officially announced. It came with a lot of great things that we touched on in our "what's new" post, and at also came a time when there was so much uncertainty in the world and everyone was on lockdown.

The Ivy renderer brought really great improvement to the Angular framework, like a drastic reduction of the Angular bundle size, over 40% compared to the last version. This ensures that it is more efficient, takes less space and, at the same time, runs the fastest Angular ever has.

Version 10 Already?

It may seem surprising that Angular pushed another major release just 4 months after the Ivy release. It is smaller than a typical release, but spans the entire Angular platform, from framework to Angular Material to CLI. Plus, the team anticipates updating to 11.0.0 in the fall!

So let's take a moment to dig into the latest version of Angular, v 10.0.0.

New Date Range Picker

Angular user interfaces had a big upgrade in Angular Material, the date picker now has a great addition, making it very important. Before now, every UI library had a date picker, and now Angular Material library has a date range picker. Just like you would see on a Expedia or booking.com, the date range component has now been added to Angular Material.

To start using the new date range picker, you can use the mat-date-range-inputand mat-date-range-picker components in Angular Material. You can see how it works with this example on StackBlitz. You can also learn more about date range selection here.

Warnings About CommonJS Imports

For maximum efficiency and speed basically, ECMAScript bundling is advised over CommonJS. Minko Gechev in this web.dev article outlines that to ensure the bundler can successfully optimize an application, developers should avoid depending on CommonJS modules, and use ECMAScript module syntax in their entire application.

The Angular team found that when you use a dependency that is packaged with CommonJS, the apps load slower and the size is often larger. With this new version of Angular, whenever your build has a CommonJS bundle, the belief is that seeing these warnings will begin to nudge developers to the most optimal option of using an ECMAScript module (ESM) bundle. The warnings will look like this:

Ecosystem Updates

The JavaScript ecosystem is ever-evolving and with every single release of Angular, the team tries to ensure that it stays up to date. With the new version 10 of Angular, the following dependencies were updated and synchronized:

• The TypeScript version was updated to TypeScript version 3.9
• The TSLib version has also been updated to TSLib version 2.0
• TSLint has been updated to version 6.0

Also the project layout has been updated, so with this new version there is a new tsconfig.base.json file. This added one supports how IDEs and build tooling resolve type and package configs better than the last one.

Options to Enforce Stricter Settings

So when you want to create a new Angular project, you use the ng new syntax and now you can add a strict flag to that like this:

ng new nameOfApp --strict

And the project created will have a strict project setup with a few new settings that make your project easier to maintain, make it easier to catch bugs ahead of time, and even give your Angular CLI some super powers like access to perform advanced optimizations on your Angular app. Some of these settings are:

• Enabling strict mode for your TypeScript files
• Turning your template type checking to Strict
• Reducing your bundle budget by default by 75%
• Configuring linting rules to help prevent declarations of type [any]
• Configuring your app as side-effect free to enable more advanced tree-shaking

Angular Team Update

The Angular team has also been up and running lately, as you can see that open issues on the Angular project have reduced by over a whopping 700 issues across components, tooling and the framework. Over 2,000 issues have been touched, and this goes to show commitment to the project and most especially to the developers using the project, which I find really admirable. The team promises to keep the stride and even commit to doing more of this in the near future.

Default Browser Config

Starting from the new version 10 of Angular, browser configuration has been updated to exclude some browsers. In Angular 9 we had Chrome 80, 81, 83; Edge 81, 81; Firefox 68, 75, 76; Safari 13.2, 13.3, 13.4; UC Browser 12; Andriod 81; Baidu 7.12; all Opera Mini browsers and others.

In Angular version 10 older browsers are no longer supported by default. Only the browsers listed below are now supported:

This means that ES5 is disabled for builds by default for new projects using version 10. However, you can enable it back with the differential loading ability by adding the browsers you want to support in the .browserslistrc file.

Deprecations

From the new version 10, Angular package format no longer includes ESM5 or FESM5 bundles. This saves developers almost 120MB of download and install time when running their favorite package manager. Also after consulting with the Angular community, the support for Internet Explorer 9 & 10 and IE Mobile are now deprecated. You can read more about all the deprecations and removals here.

Updating to Version 10

To update from any Angular version to version 10, visit update.angular.io for detailed information for the specific update you need. To have the best update experience, it is recommended to always upgrade one major release at a time. This means if you are using Angular 8, upgrade to version 9 first before doing 10.

To update using the CLI run the command below:

ng update @angular/cli @angular/core

Conclusion

This is a quick overview of all the notable improvements that shipped with the new Angular version 10. There are a couple of new features, and the date range picker in Angular Material is my favorite. What is yours? Remember to stay safe and keep hacking!