Angular 10 introduces new features, performance improvements, stricter development tools, enhanced localization support, and updates to Angular Material, making it easier for developers to build and maintain modern web applications. Released in June 2020, Angular 10 focuses less on major new functionality and more on improving stability, compatibility, and developer productivity across the Angular ecosystem.

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 a more extensive and slower application. You may 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 your project’s maintainability, helps you detect bugs earlier, and enables the CLI to perform advanced optimizations 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 version 3.9, which includes 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 enjoy elaborate TypeScript configuration, a 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 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 is 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 avoids undefined expressions in a holey array.
• The core avoids a migration error when 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 performed on 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

Upgrading to Angular 10 is generally a straightforward process, but proper preparation can help prevent compatibility issues and reduce downtime. Before beginning the upgrade, review the prerequisites, verify version compatibility, and create a backup of your project.

Prerequisites

Before upgrading, ensure your development environment meets Angular 10 requirements:

• Node.js 10.13 or later (Node.js 12.x LTS recommended)
• Angular CLI version compatible with Angular 10
• TypeScript 3.9
• npm or Yarn package manager
• A clean Git working directory with all current changes committed

You can verify your current versions using:

node -v
npm -v
ng version

Create a Backup Before Upgrading

Before making any framework upgrades, create a complete backup of your project.

Recommended backup methods include:

• Creating a Git commit before starting the upgrade
• Creating a dedicated upgrade branch
• Backing up configuration files such as:
  • package.json
  • angular.json
  • tsconfig.json
  • environment configuration files

Example:

git checkout -b angular-10-upgrade
git add .
git commit -m "Backup before Angular 10 upgrade"

This provides a rollback point if any issues occur during the migration process.

Check Version Compatibility

Before running the upgrade command, verify that your project dependencies support Angular 10.

Pay special attention to:

• Angular Material packages
• Angular CDK
• RxJS versions
• TypeScript version requirements
• Third-party Angular libraries
• State management packages such as NgRx

Applications running Angular 8 or earlier should typically upgrade one major version at a time rather than skipping directly to Angular 10.

You can review official upgrade recommendations using Angular’s Update Guide.

Run the Upgrade

Once compatibility has been verified, update Angular CLI and Angular Core:

ng update @angular/cli @angular/core

If Angular Material is installed, update it as well:

ng update @angular/material

Angular CLI will automatically apply available migrations and update project configuration files where required.

Common Upgrade Issues

While most projects upgrade successfully, several issues are commonly encountered during migration.

Dependency Conflicts

Some packages may require newer versions before Angular 10 can be installed.

Common symptoms include:

• npm dependency resolution failures
• Peer dependency warnings
• Build errors after installation

Review package documentation and update incompatible libraries before proceeding.

TypeScript Compatibility Problems

Angular 10 requires TypeScript 3.9 support.

You may encounter:

• New type-checking errors
• Deprecated syntax warnings
• Compilation failures in custom code

Address these issues before deploying the upgraded application.

Third-Party Library Compatibility

Older Angular libraries may not support Angular 10 or Ivy.

Potential problems include:

• Missing metadata files
• Build failures
• Runtime dependency injection errors
• Unsupported package versions

Whenever possible, update third-party packages to versions officially supporting Angular 10.

Ivy-Related Issues

Angular 10 continues using the Ivy rendering engine introduced in Angular 9.

Common Ivy-related issues include:

• Library compatibility warnings
• Template compilation errors
• Metadata generation problems
• Runtime rendering inconsistencies

Most issues can be resolved by updating dependencies and rebuilding the project using the latest Angular CLI tools.

Test the Application Thoroughly

After completing the upgrade:

• Run all automated tests
• Verify application builds successfully
• Review browser console output
• Test critical application functionality
• Validate production deployment procedures

Example:

ng test
ng build --prod

Use Angular’s Official Update Tool

For project-specific upgrade instructions, Angular provides an interactive update guide that generates recommendations based on your current and target versions.

Official Update Tool:

https://update.angular.io

Following the official guidance and performing thorough testing will help ensure a smooth migration to Angular 10 with minimal disruption to your application.

Angular 10 vs Angular 9

Angular 10 builds on the foundation introduced by Angular 9 and the Ivy rendering engine. While Angular 9 focused on the successful rollout of Ivy as the default compiler and runtime, Angular 10 improves stability, developer experience, tooling, and ecosystem compatibility.

For developers already using Angular 9, upgrading to Angular 10 provides improved maintainability, better compiler performance, stronger type checking, and a more streamlined development experience.

Angular 10 Requirements

Before upgrading to Angular 10, ensure your development environment meets the recommended requirements.

Supported Node.js Versions

Angular 10 officially supports:

• Node.js 10.13 or later
• Node.js 12.x LTS

Using a supported Node.js version helps avoid package installation issues and compatibility problems during upgrades.

Supported TypeScript Versions

Angular 10 supports:

• TypeScript 3.9

The update introduces performance improvements, bug fixes, and enhanced type checking capabilities that benefit Angular applications.

Recommended Development Environment

For the best experience with Angular 10, consider the following setup:

• Latest Angular CLI version compatible with Angular 10
• Visual Studio Code or another modern TypeScript-compatible IDE
• Node.js LTS release
• Git for version control
• npm or Yarn package manager

Maintaining an up-to-date development environment can significantly reduce upgrade complications and improve application performance.

Is Angular 10 Still Supported?

Angular follows a predictable release cycle, typically introducing two major releases per year. Each version receives active support for a limited period before reaching end-of-life status.

Because Angular 10 was released in 2020, it is no longer actively supported by the Angular team. This means:

• No new security updates
• No bug fixes
• No compatibility updates for modern tooling
• No official support for newer browser and platform changes

Long-Term Maintenance Considerations

Organizations still running Angular 10 applications should evaluate the risks associated with outdated dependencies and unsupported frameworks. Legacy applications may experience:

• Security vulnerabilities
• Compatibility issues with modern browsers
• Dependency conflicts with newer packages
• Increased maintenance costs

Recommendation for Production Applications

For new projects and actively maintained production applications, using a newer Angular version is strongly recommended. Current Angular releases provide improved performance, security enhancements, standalone components, modern tooling support, and ongoing maintenance from the Angular team.

Common Upgrade Issues

Although upgrading to Angular 10 is generally straightforward, developers may encounter several common challenges.

Dependency Conflicts

Some third-party packages may not immediately support Angular 10. Before upgrading:

• Review package compatibility requirements
• Update dependencies to supported versions
• Remove abandoned or deprecated packages

TypeScript Compatibility Issues

Angular 10 requires TypeScript 3.9 support. Applications relying on older TypeScript versions may encounter:

• Compilation errors
• Stricter type checking failures
• Deprecated syntax warnings

Review TypeScript configuration files and address any newly reported issues before deploying updates.

Third-Party Library Migration Concerns

Certain Angular libraries may require additional updates to support Angular 10 and Ivy.

Potential issues include:

• Missing type definitions
• Deprecated APIs
• Package compatibility warnings
• Build failures during compilation

Always review release notes for critical third-party packages before upgrading.

Common Ivy-Related Problems

Since Angular 10 continues using Ivy as the default rendering engine, some applications may experience:

• Library compatibility issues
• Build-time warnings
• Metadata generation errors
• Runtime injection problems

Most issues can be resolved by updating dependencies and ensuring all packages support Ivy compilation.

Official Resources

For the most current information about Angular releases and upgrades, consult the official Angular resources:

• Angular Changelog: https://github.com/angular/angular/blob/main/CHANGELOG.md
• Angular Update Guide: https://update.angular.io
• Angular Documentation: https://angular.dev

These resources provide detailed migration instructions, compatibility information, and best practices for maintaining Angular applications.

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 its 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.

FAQs