What’s New in Angular 10

Angular Version 10.0.0 was released in late June. A major release, Angular 10 includes changes such as a new date range picker in Angular Material, upgrading TypeScript versions, library version updates, and more.

New features include:

• Ngtsc Compiler Interface
• Configure Async Timeouts
• Stale Lock File Reporting
• Lazy Computation of basePaths
• Merging Translation Files
• Explicit Mapping

New in Angular 10

The release of Angular 9 introduced the Ivy compiler. The upgrade to Angular 10 focuses on quality and performance improvements.

One of the biggest updates in Angular 10 is the ability to set optional, stricter settings when creating your workspace. This is done by enabling the strict flag when running the ng command: ng new –strict. Enabling this flag initializes the workspace with new settings that allow for easier maintainability, bug catching, and advanced optimization.

Angular 10 - Major Changes:

TypeScript 3:

TypeScript 3.9 is now featured in Angular 10, with TypeScript 3.8 having been removed. TypeScript 3.6 and 3.7 are also no longer supported.

Default Browser Configuration Update:

The default browser configuration has been updated to exclude older, less-used browsers, such as IE9 and IE10.

Strict Project Setup:

Optional stricter settings offer a strict project setup when creating a new workspace, via ng new -- strict. This improves maintainability, helps catch bugs, and allow for advanced optimizations on the app through the CLI.

Warnings for CommonJS Imports:

When using a dependency that is packaged with CommonJS, it can result in larger and slower applications. In Angular 10, you are now warned when your application pulls in one of these bundles.

TSlib and TSLint Updates:

TSlib, a runtime library for TypeScript containing helper functions, has been updated to TSlib 2.0. TSLint, a static analysis tool for TypeScript, has been updated to TSLint 6.

ESM5 and FESM5 Bundles:

Angular Package Format no longer includes ESM5 or FESM5 bundles. This is to save download and install time for Angular packages and libraries.

Angular Material Date Range Picker:

The release of Angular 10 also includes a new date range picker control. To use the date range picker, you can use the mat-date-range-input and mat-date-range-picker components.

Angular 10- Features:

Ngtsc Compiler Interface:

A compiler interface has been added that wraps the ngtsc compiler, which manages multiple typecheck files using the project interface, creating Scriptinfos as needed.

Configure Async Timeouts:

Async locking timeouts can now be configured, allowing for the ngcc.config.js file to set the retryAttempts and retryDelay options for the AsyncLocker. An integration test adds a new timeout check and uses the ngcc.config.js file to reduce timeout time to prevent the test from hanging too long.

Stale Lock File Reporting:

To improve ngcc performance, you are now allowed to immediately report stale lock files. A cached copy of the tsconfig file is then stored and can be reused if the tsconfig path is the same.

Lazy Computation of basePaths:

To improve performance, the computation of basePaths has been made lazy, so work is only done if needed in TargetedEntryPointFinder. Previously, basePaths was computed whenever the finder was instantiated, which was a waste of effort when the targeted entry-point had already been processed.

Merging Translation Files:

Previously, only one translation file per locale was permitted. Now users can specify multiple translation files per locale, and the transactions from each file will be merged by a messaging ID.

Unknown Element Warnings:

Warnings about unknown elements are now logged as errors. This won’t break an app, though it may cause issues with tools that expect nothing to be logged via console.error.

JSDoc Comment Removal:

Angular NPM no longer contains certain JSDoc comments to support the closure compiler’s advanced optimizations.

Formatting Day Periods that Cross Midnight:

Logic has been updated to improve formatting day periods that cross midnight. When formatting a time whith the b or B format code, the rendered string was not properly handling day periods that spanned days. Intead, the logic was falling back to the default case of AM.

CanLoad can Return Urltree:

CanLoad can now return UrlTree. A CanLoad guard returning Urltree cancels current navigation and redirects. This matches the current behavior available to CanActivate guards that also has been added. This does not affect preloading. A CanLoad guard blocks any preloading, and any roates with a CanLoad guard will not be preloaded and the guards will not be executed as a part of preloading.

Empty Resolver Cancelling Navigation:

Any resolver that returns EMPTY will now cancel navigation. To allow navigation to continue, developers must update their resolvers to update some value, such as default!Emtpy.

Entity Autocompletion Removal:

Autocompletion is being removed from HTML entities, such as &amp, because of questionable value and a performance issue.

EntryPoint Manifest Performance Improvements:

Application performance has been improved by reducing the size of the entrypoint manifest and a caching technique in the manifest. In addition, caching of dependencies is done in the entrypoint manifest and read from there rather than being computed every time.

Explicit Mapping:

Explicit mapping is being exposed from closure to devmode files. This feature is aimed at development tools that have to translate production build inputs into their devmode equivalents.

Bug Fixes:

ModuleWithProviders Generic Property:

Though a generic parameter has been required for the ModuleWithProviders pattern to work with the Ivy compiler, View Engine allowed the generic type to be omitted. This has been fixed, and generic has been made mandatory with ModuleWithProviders.

Undecorated Classes:

Logic has been added to undecorated-class migration to decorate derived classes of undecorated classes that use Angular.

Urlmatcher Type:

Previously, Urlmatcher’s type did not reflect that it could return null. With this release, Urlmatcher’s type now reflects that it could always return null.

A number of bug fixes have been made including the compiler avoiding undefined expressions in a holey array and the core avoiding a migration error when a non-existent symbol is imported. There is also a workaround in the core for the Terser inlining bug. Another bug fix properly identifies modules affected by overrides in TestBed.

How to upgrade to Angular 10

You can find the Angular 10 release on GitHub. To update your current Angular install, you can run the following command:

ng update @angular/cli @angular/core</td>

We are happy to announce that Wijmo supports Angular 10! Wijmo has been supporting Angular since version 1 (AngularJS). We are committed to providing Angular developers a powerful toolset for building enterprise-grade applications.

We are pleased to announce that you can start using Angular 10 applications with Wijmo today!