Get to know the new Angular version 10!

7 minutes reading


Angular is a TypeScript-based open-source framework for building mobile and desktop web applications. It is developed and supported by Google’s Angular team.

A major upgrade of the framework has been released on the 24th of June, only four months after version 9. While this upgrade is not as impactful as the previous one, it affects the Angular framework, Angular Material, and the CLI. The primary purpose of version 10 is to keep everything up-to-date and well synchronized with the JavaScript ecosystem rather than include new features.

Let’s jump right into it and explain what has been upgraded and what deprecated!

What is new in Angular 10?

New Date Range Picker

A new date range picker is included in the Angular Material UI component library. You can use the mat-date-range-input and mat-date-range-picker components to utilize the new picker. An overview example of it can be found on StackBlitz.

 

Warnings about CommonJS Imports

CommonJS modules could impact your application and make your JavaScript bundles larger than necessary. Angular 10 includes warnings for CommonJS imports, which will alert you when a dependency package with CommonJS may lead to more extensive and slower application. You will be allowed to substitute the dependencies with an ECMAScript module (ESM) bundle.

Optional Stricer Settings

Angular 10 allows you to utilize a strict mode project step when creating a new workspace with ng new.

ng new --strict

When the strict mode is enabled, it improves the maintainability of your project, helps you detect bugs in advance, and allows the CLI to perform advanced optimization on your app. The strict flag enables strict mode in TypeScript; sets template type checking to Strict; reduces default bundle budgets by ~75%; disallows the use of type any in the linting rules; and configures your app excluding unwanted effects to enable more advanced tree-shaking.

Major Changes

Recently TypeScript released a new 3.9 version that comes with performance improvements, bug fixes, and new features. To keep everything up-to-date Angular responds with version 10, which supports it. All Angular users can have elaborate TypeScript configuration, faster compiler experience, error-checking, and quick fixes.

The runtime library for TypeScript – TSlib, has been updated to version 2.0. Along with that, the static analysis tool for TypeScript, – TSLint,  has been updated to version 6.

The project layout has also been updated. A new tsconfig.base.json is introduced, and it carries the content of the root tsconfig.json file. The “Solution Style” concept of the tsconfig.json file is included in TypeScript 3.9 to prevail issues caused by the tsconfig.json file existing only to reference other tsconfig.json files. The additional tsconfig.json file improves IDE support as well as build tooling resolve type and package configurations.

New Default Browser Configuration

An update on the browser configuration for new projects has been applied to exclude older and rarely-used browsers, including Internet Explorer 9, Internet Explorer 10, and Internet Explorer Mobile. This change leads to disabling ES5 builds by default for new projects. If you need to enable ES5 builds and differential loading you have to add the browsers that require it (such as IE or UC Browser) in the .browserslistrc file.

Language Service

Autocompletion is removed from HTML entities, such as &, <, etc., due to its questionable value and performance cost and to ensure the compatibility with the core functionality of Angular LS.

Compiler Update

In Angular 10, a compiler interface intended to wrap the actual ngtsc compiler is added. The language-service-specific compiler enables multiple type-checking files by using the project interface that creates the necessary ScriptInfos.

Name spans have been added for property reads and method calls handled by the compiler.

Dependency information and ng-content selectors were added to the metadata. The proposed compiler feature is going to provide additional useful metadata for tools, like the Angular Language Service, and provide the ability to accommodate suggestions for directives/components defined in libraries.

Propagation of the correct value span in an ExpressionBinding of a micro syntax expression to ParsedProperty is enabled, which might propagate the span to the template ASTs (both VE and Ivy).

ngcc

Angular 10 introduces an implementation of an A-program-based entry-point-finder, designed to process entry points that can only be reached by a program determined by a tsconfig.json file. This option can speed up processing when there are many dependencies installed. However, a relatively small portion of the entry points is actually imported into the application.

The size of the entry-point manifest file is reduced. Knowing the base path for package and entry points avoids the need for storing unnecessary empty arrays. Before, ngcc would have to parse the file of the entry point to compute dependencies, even if the entry point did not need to be processed, which required more time for large node modules.

Localization

Angular 10 includes support for merging of multiple translation files. Earlier, only one translation file per locale could be loaded, while now users can define numerous files per locale and merge the translations from each one by a message ID. Users must arrange the files in ascending order as the merging is done on a first-come basis. If there are an "a.xlf”"b.xmb", and "c.json" files to be merged, the messages from the "a.xlf" file will be considered with greater weight.

Service Workers

Previously, when Vary headers were taken into account while retrieving resources from the cache it entirely prevented the retrieval of cached assets and led to unpredictable behavior due to ServiceWorker implementation details and inconsistent implementations in different browsers. With Angular 10, Vary headers are ignored when retrieving resources from the ServiceWorker caches. This can result in retrieving resources even when their headers differ. You need to ensure the Angular ServiceWorker is configured to avoid caching affected resources, in case your application requires to differentiate its responses based on header requests.

Core

In Angular 10 all warnings about unknown elements will be logged as errors, which could stumble tools that expect nothing to be registered via console.error.

Previously, View Engine allowed the generic type to be omitted. Now it is made mandatory for ModuleWithProviders. A generic type parameter is required for the ModuleWithProviders pattern to work with the Ivy compilation and rendering pipeline, so if you are using the pattern without a generic type in your application code, it will be updated when you upgrade to version 10.

Bug Fixes

Several bugs have been fixed in version 10, including:

  • The compiler avoiding undefined expressions in a holey array.
  • The core avoiding a migration error while a non-existent symbol is imported.
  • Proper identification of modules affected by overrides in TestBed.

Converting pre-Ivy code

All pre-Ivy dependencies from npm should be converted to Ivy dependencies, as Ivy code can only be linked against other Ivy code. Such transformation is required as a precursor to running ngtsc on the application. Further compilation and linking operations must be made upon this transformed version of the dependencies.

Deprecations and Removals

ESM5 and FESM5 bundles are no longer included in the Angular Package Format. This saves 119MB of download and install time while running yarn or npm install for Angular packages and libraries. These distributions had become obsolete as Angular generates ES5 from ES2015, which is the default language level consumed by Angular tooling.

More about deprecations and removals you can find in Angular’s official documentation.

How to update to Angular 10

To update to Angular 10, you can execute the following command:

ng update @angular/cli @angular/core

Note that it is recommended to upgrade one major release at a time.

Comprehensive instructions on your particular case you can obtain from Angular’s update tool.

HostArmada and Angular 10

When our Web Hosting Service Architect and our Innovations Captain were designing the core set of services that HostArmada would offer, they did not miss Angular. From the very beginning, we incorporated the Angular-CLI tool in every service that we offer so in order to use it our customers will have to access the SSH service for their web hosting account and then simply typengto see a complete list of all the available commands related to the Angular-CLI tool. Still, should you face any issue with the usage of the tool, please do not hesitate to contact our Technical Support Crew and they will do their very best to resolve the issue or answer any Angular related questions you might have.

Conclusion

Stephen Fluin, mentioned that Angular is increasing the investments in working with the community. For three weeks, they have managed to resolve over 700 issues across the framework, tooling, and components. Angular’s goal is to release two major versions each year to keep everything up-to-date and synchronized with the rest of the JavaScript ecosystem. They have even stated that the release of Angular version 11 is planned for this fall.