75

Everything you should know about Angular 10

The version 10.0.0 of Angular framework is released now. It is known as Angular 10 and released on June 24, 2020. Angular 10 is a major release, and the changes introduced are reflected on the entire platform, including the framework, Angular Material, and the CLI.

The Angular 10 release is smaller than the typical previous releases. It is released just four months after the release of the previous version Angular 9. Google has already stated that we shall try to release two major versions each year to keep Angular synchronized with the rest of the JavaScript ecosystem and to have a predictable schedule, so don’t assume Angular 10 as the last Angular version. The company may release Angular version 11 at the end of the year.

Major changes introduced in Angular 10

Let’s see what Angular 10 is, what’s new in Angular 10, and the new features and breaking changes the Google-developed web framework Angular 10 has introduced to us:

• New Date Range Picker
• Warnings about CommonJS imports
• Optional Stricter Settings
• Keeping Up to Date with the Ecosystem
• New Default Browser Configuration
• Deprecations and Removals

1. New Date Range Picker

Angular 10 has introduced a new date range picker. If you want to use the new date range picker, you can easily do it by using the mat-date-range-input and mat-date-range-picker components.

Example:

Output:

2. Warnings about CommonJS imports

In the previous Angular versions when you use a dependency that is packaged with CommonJS, you would get the result in the form of larger and slower applications.

With the introduction of Angular 10 when you use any of these bundles, it will give you a warning message. If you get these warnings for your dependencies, you should prefer an ECMAScript module (ESM) bundle for your project.

3. Optional Stricter Settings

Angular 10 provides a stricter project setup when you create a new workspace in Angular 10 by using the ng new command

Use the following command to enable this strict feature.

After enabling this feature, your new project initializes some settings that improve your app’s overall features such as maintainability, find bugs ahead of time and allow the CLI to perform advanced optimizations on your app.

Following is the list of actions that the strict flag does specifically:

• When you enable strict flag in your app, it configures the app as side-effect free to ensure more advanced tree-shaking.
• It enables strict mode in TypeScript.
• It turns template type checking to Strict.
• By enabling the strict flag, the default bundle budgets have been reduced by upto 75%.
• It configures linting rules to prevent declarations of type any.

4. Keeping Up to Date with the Ecosystem

Some updates are introduced in Angular 10’s dependencies to keep it up to date and stay synchronized with the JavaScript ecosystem.

The most important updated dependencies in Angular 10 are:

• TypeScript is updated to TypeScript 3.9: In Angular 10, TypeScript is updated to the TypeScript version 3.9, unlike the previous version, which supported TypeScript 3.6, 3.7, and even 3.8. Typescript is the parent language of Angular. It is built on JavaScript by adding syntax for type declarations and annotations, which is later used by the TypeScript compiler to type-check the code. It produces the result in a clean, readable JavaScript that can run on lots of different runtimes.
• TSLib has been updated to v2.0: TSlib is updated to version 2.0. The runtime library for TypeScript contains helper functions that have now been updated to TSlib 2.0.
• TSLint has been updated to v6: TSLint is the static analysis tool of TypeScript. Along with TSlib, there is an upgrade on the TSLint also for version 6.

5. New Default Browser Configuration

Angular 10 has updated the browser configuration for new projects. In this updated version, the older and less used browsers are now excluded. You can see the differences of by default supporting browsers clearly by comparing the Angular version 9 and Angular version 10.

List of default browsers in version 9

• and_chr 81
• and_ff 68
• and_qq 10.4
• and_uc 12.12
• android 81
• baidu 7.12
• chrome 83
• chrome 81
• chrome 80
• edge 83
• edge 81
• edge 18
• firefox 78
• firefox 77
• firefox 76
• firefox 68
• ie 11
• ios_saf 13.4-13.5
• ios_saf 13.3
• ios_saf 12.2-12.4
• kaios 2.5
• op_mini all
• op_mob 46
• opera 69
• opera 68
• safari 13.1
• safari 13
• samsung 12.0
• samsung 11.1-11.2

You can check it by using the npx browserslist command.

List of default browsers in version 10

• chrome 83
• edge 83
• edge 81
• edge 18
• firefox 76
• firefox 68
• ios_saf 13.4-13.5
• ios_saf 13.3
• ios_saf 13.2
• ios_saf 13.0-13.1
• ios_saf 12.2-12.4
• ios_saf 12.0-12.1
• safari 13.1
• safari 13
• safari 12.1
• safari 12

You can see that many by default, supporting browsers are excluded now in the new version. This is all because of disabling ES5 builds by default for new projects. If you want to enable ES5 builds and differential loading for browsers, you can simply add the required browsers you need to support in the .browserslistrc file.

6. Deprecations and Removals

Angular 10 has made many changes in which the new version has done several deprecations and removals.

• In the new Angular 10 version, the Angular Package Format no longer includes ESM5 or FESM5 bundles so, Angular 10 has deprecated the inclusion of ESM5 or FESM5 bundles.
• It makes the new version very light and saves at least 119MB of download and install time when you run yarn or npm install for Angular packages and libraries.
• Angular 10 features TypeScript 3.9. As opposed to the previous version, which supported typescript 3.6, 3.7, and even 3.8.
• In Angular 10, any down leveling to support ES5 will be done at the end of the build process.
• Angular 10 also deprecated the older browsers such as IE 9, 10, and Internet Explorer Mobile based on heavy consultation with the community.

7. Resolved issues & Bug fixes

The updated new Angular 10 version has resolved many issues and fixed bugs we have faced in previous versions.

A lot number of bug fixes have been made in Angular 10. Following is a list of some bug fixes and resolved issues:

• Router: In the updated version of Angular 10, the UrlMatcher is now allowed to return null.
• Core: If you have an undecorated-classes-with-decorated-fields migration, it doesn’t decorate the derived classes.
• Service workers: Prevent SW registration strategies from affecting app stabilization.
• Modules: In Angular 10, you can properly identify modules affected by overrides in TestBed.
• Compiler: When you import a nonexistent symbol, the compiler will avoid undefined expressions in a holey array, and the core will avoid a migration error.

How to update to Angular version 10 from the previous version

It is always a best practice to use the updated version of any software. In the same way, you should use the latest Angular version. Here, we are specifying how to upgrade your older version of Angular in the latest one. It doesn’t matter which Angular’s version you are using, you can easily upgrade it to Angular latest version by using the following steps:

• First, check the current version of your Angular CLI by using the ng –serve
• Now, run the following command to uninstall your older version of Angular.

• Now, verify and clear the cache by using the following commands.

• Clean the cache by using the following command:

• Now, install the latest Angular CLI by using the following command.

---