What’s new in Angular 10

The next major release of the popular Google-created web framework is nearing the finish line

What’s new in Angular 10
Thinkstock

Angular 10, a major upgrade to the popular web development framework, has reached the release candidate stage. The upgrade to the Google-developed, TypeScript-based framework focuses more on ecosystem improvements than new features.

Angular 10 is set to be smaller than previous versions of Angular. A target date for an Angular 10 production release is still to be determined. Angular 9.0 became generally available February 6, 2020, followed by Angular 9.1 on March 25, 2020. Angular 8.0 arrived May 28, 2019.

Where to download the Angular 10 release candidate

You can find preliminary releases of Angular 10 on GitHub.

New features in Angular 10

Key features of Angular 10 thus far include:

  • A compiler interface has been added that wraps the actual ngtsc compiler. The language service-specific compiler manages multiple typecheck files using the project interface, creating Scriptinfos as necessary.
  • For the compiler, name spans have been added for property reads and method calls.
  • In a breaking change, generic has been made mandatory for ModuleWithProviders. A generic type parameter has been required for the ModuleWithProviders pattern to work with the Ivy compilation and rendering pipeline, but before this commit, View Engine allowed the generic type to be omitted. If a developer is using ModuleWithProviders without a generic type, a version 10 migration will update the code. But if a developer is using View Engine and depending on a library that omits the generic type, a build error will be issued. In this case, ngcc will not help and the migration will only cover application code. The library author should be contacted to fix their library. As a workaround, skipLibChecks could be set to false in tsconfig or updating an app to use Ivy only.
  • TypeScript 3.9 is now featured, with support for TypeScript 3.8 having been removed. This is a breaking change. TypeScript 3.6 and TypeScript 3.7 also are no longer supported.
  • Type-checking performance improvements have been made to the compiler-cli.
  • 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 in the case when the targeted entry-point had already been processed.
  • Merging of multiple translation files is supported. Previously, only one translation file per locale was permitted. Now users can specify multiple files per locale, and the transactions from each file will be merged by messaging ID.
  • Async locking timeouts can be configured. This adds support for the ngcc.config.js file for setting the retryAttempts and retryDelay options for the AsyncLocker. An integration test adds a new check for a timeout and uses the ngcc.config.js to reduce the timeout time to prevent the test from taking too long.
  • In a breaking change, warnings about unknown elements now are logged as errors. While this will not break an app, it might trip up tools that expect nothing to be logged via console.error. 
  • In another breaking change, any resolver that returns EMPTY will cancel navigation. To allow navigation to continue, developers must update the resolvers to update some value, such as default!Empty.
  • The addition of dependency information and ng-content selectors to metadata. This proposed compiler feature would provide additional metadata useful for tools such as the Angular Language Service, offering the ability to provide suggestions for directives/components defined in libraries.
  • Performance improvements, achieved 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. Previously, even if an entrypoint did not need processing, ngcc (Angular Ivy compatibility compiler) would parse the files of the entrypoint to compute dependencies, which would take a lot of time for large_node modules.
  • In a breaking change, logic has been updated pertaining to formatting day periods that cross midnight. When formatting a time with the b or B format code, the rendered string was not properly handling day periods that spanned days. Instead, the logic was falling back to the default case of AM. This logic has been updated so it matches times within a day period that extends past midnight, so it will now render correct output, such as at night in the case of English. Applications using either formatDate() or DatePipe or the b and B format codes will be affected by this change.
  • For the router, the CanLoad guard now can return Urltree. A CanLoad guard returning Urltree cancels current navigation and redirects. This matches current behavior available to CanActivate guards that also has been added. This does not affect preloading. A CanLoad guard blocks any preloading; any routes with a CanLoad guard will not be preloaded and the guards will not be executed as part of preloading.
  • Propagation of the correct value span in an ExpressionBinding of a microsyntax expression to ParsedProperty, which in turn would propagate the span to the template ASTs (both VE and Ivy). This proposal also is for the compiler.
  • In a fix to the core, logic would be added to undecorated-class migration to decorate derived classes of undecorated classes that use Angular features.
  • In a breaking change, Urlmatcher’s type will reflect that it could always return null.
  • For the service-worker, a fix has been put in for a situation in which there was a chance that the service worker will never register when there is a long-running task or recurring timeout.
  • 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.
  • Angular NPM no longer contains certain jsdoc comments to support the Closure Compiler’s advanced optimizations. This is a breaking change. Support for Closure Compiler in packages has been experimental and broken for some time. Anyone who uses Closure Compiler is likely better off consuming Angular packages built from sources directly rather than consuming versions published on NPM. As a temporary workaround, users can consider using their current build pipeline with Closure flag --compilation_level=SIMPLE. This flag will ensure that the build pipeline produces buildable, runnable artifacts, at a cost of increased payload size due to advanced optimizations being disabled.

Copyright © 2020 IDG Communications, Inc.