What’s new in Angular 9.1

Angular 9.1 has arrived, with improvements for performance and concurrency to the ngcc compatibility compiler. The Ivy compilation and rendering pipeline received attention as well, resulting in better performance.

Angular 9.1, published March 25, follows the Angular 9.0 release, which became available as a production release on February 6, 2020. The version 9.0 upgrade to the popular TypeScript-based framework switches applications to the Ivy compiler and runtime by default.

[ Also on InfoWorld: TypeScript vs. JavaScript: Understand the differences ]

Ivy offers faster, AOT compilation as well as smaller bundle sizes, faster testing, and better debugging. Improved CSS class and style binding is featured in Ivy as well, along with improvements in type checking, build errors, and build times. Also part of Angular 9 is ng update, which promises to be a more reliable and informative tool for updating applications and their dependencies. 

Angular provides dependency injection, which is particularly useful for assembling data services for applications, along with use of an HTML template to compose components. In Angular, developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.

TABLE OF CONTENTS

• Where to download Angular 9.1 or previous releases
• New features in Angular 8.0
• New features in Angular 7.2
• New features in Angular 7.1
• New features in Angular 7.0

SHOW MORE 

Where to download Angular 9.1 or previous releases

You can download the Angular production release from GitHub as well as beta releases. An Angular update guide has been published, along with a guide to upgrading to Angular 9.

New features in Angular 9.1

• Performance optimizations for the ngcc, as well as concurrency and reliability improvements for ngcc monorepo use cases. The NPM postinstall script is no longer recommended. With ngcc, async processing is paused if another process has the lockfile. Also with ngcc, a source map flattening capability is able to load up a tree of source files connected by source maps and flatten them into a single source map. This source map maps directly from the final generated file to the original sources referenced by the intermediate source maps.
• TypeScript 3.8 is supported.
• Internationalization, via i18n, now supports RTL locale information.
• Ivy performance has been improved by removing the unused event argument in listener instructions. Previously, Ivy generated an $event argument, even if it was not being used by the listener expressions. This could lead to unnecessary byte generation. Also, a compatibility fix for Ivy template-checking has been included.

New features in Angular 9.0

Aside from making Ivy the default, Angular 9.0 includes the following new features and improvements:

• New options for providedIn, for creating an @Injectable service, include platform, which makes a service available in a special singleton platform injector shared by all applications on a page, and any, which provides a unique instance in every module that injects the token.
• Component harnesses, to ensure that unit tests are correctly scoped and less brittle. Implementation details are abstracted away.
• New components enabling inclusion of YouTube and Google Maps capabilities in applications.
• TypeScript 3.7 and TypeScript 3.6 are supported.
• Performance has been improved for eventListeners.
• The default currency code in CurrencyPipe is now configurable.
• To improve performance of the Ivy renderer, repeat global state accesses are removed from the i18n instructions when the information is already available. Ivy also gets a performance boost from the removal of extra SafeDetection code. And the @angular/localize package can be added to an Angular CLI project via ng add.
• Also for the Ivy renderer, better error messages are offered for unknown components. In addition, a new flag has been added to localize-translate that allows the source locale to be specified.
• To improve performance in the core, sanitization becomes tree-shakable in the Ivy renderer. 
• Also in Ivy, template type-checking has been changed to produce ts.Diagnostics. This mends a design issue in which the Angular compiler has produced both native TypeScript diagnostics and its own internal diagnostics format, which has not been optimal.
• Also for the core, Angular adds a new migration schematic, as per the given migration plan.
• The NgFormSelectorWarning selector has been removed.
• For ngcc (Angular compatibility compiler), a migration has been added for undecorated child classes.
• A number of bug fixes have been made for Ivy, the compiler, core, language-service, ngcc, and Bazel.

New features in Angular 8.2

Released in August 2019, Angular Version 8.2 includes:

• To improve compiler performance, copying is avoided from prototype while cloning an object. This updates the clone function of the ApplySourceSpanTransformer class, where the for-in loop was used, which resulted in copying from prototype to own properties, consuming more memory.
• TypeScript 3.5 support.
• Compiling of targets used by Kythe tools with the Ivy renderer. This eliminates issues with cross references to transitive dependencies not being generated, because of how such dependencies are loaded by the legacy compiler.
• Support for $element in upgraded component template and templateURL functions.
• For Bazel, users now can pass a custom Bazel CompilerHost for an Angular compilation, supporting the overriding of the TypeScript compiler host.
• A number of bug fixes, including increasing the memory limit of ngc under Bazel from 2GB to 4GB.

New features in Angular 8.1

• Test helpers are provided for the upgrade/static library that wire up Angular and AngularJS injectors with no need for a full bootstrap of a hybrid app.
• Deprecation of the integration with the Web Tracing Framework, which Angular had previously supported for performance testing. The Angular development team noted that the integration has not been maintained and likely does not work for most Angular applications today. 
• Implementation of definitionAndBoundSpan, which is now preferred over definition. The implementation of definition has been refactored and simplified.
• Deprecation of the platform-webworker APIs. The inclusion of this support had been experimental, to try to run an entire application in a Web Worker, for web content to run background scripts. Angular proponents no longer seek to do this.

Angular 8.1 also offers bug fixes for the Bazel build tool as well as the Angular core and router.

New features in Angular 8.0

Improvements in Angular 8, released in May 2019, include the following:

• Better application startup time on modern browsers.
• APIs for tapping into the CLI.
• More web standards support.
• Differential loading, in which the browser chooses between modern or legacy JavaScript based on its own capabilities. When users load an application, they automatically get the needed bundle.
• Web workers, which can speed up an application during CPU-intensive processing, now can be generated from the CLI.
• A dynamic imports capability for importing modules. This is useful when developers want to load a module conditionally or on demand. Dynamic imports will improve support from editors such as Visual Studio Code, which will be able to validate these imports.
• Builder APIs for tapping into ng build, ng test, and ng run to perform processes such as build and deployment.
• Workspace APIs in the CLI, with an API to make it easier to modify the workspace configuration. The workspaces namespace offers an API for interacting with workspace file formats.
• Improvements for migrating from AngularJS, the previous generation of the framework. A LocationUpgradeModule enables a unified location service to shift responsibilities to the Angular Location.
• TypeScript 3.3 support.
• Two new features, the Ivy renderer and Bazel build tool, remain in the preview stage. 
• Adding the ability to watch for AngularJS URL updates through the onUrlChange hook. This pull request adds a method to the LocationShim so updates in AngularJS can be tracked in Angular.
• The addition of overloads to the transform methods of SlicePipe, so there are better types than any for value and any as a return. In a breaking change, the slice pipe is now properly typed, so the Ivy renderer and fullTemplateTypeCheck will catch errors inside an ngFor using a slice. SlicePipe creates a new Array or String with a subset (slice) of the elements.
• An API to retrieve the value of history.state, useful in providing a backward-compatible Location service that can emulate the AngularJS $location service, since it will be necessary to read the state date in order to produce AngularJS location transition events. The feature also will be useful to any application that wants to access state data through Angular instead of going directly to DOM APIs. 
• DOCUMENT is no longer a token exported from @angular/platform-browser. It is now exported only from @angular/common.
• Attributes for aria-* are treated as safe HTML and are not being stripped by the HTML sanitizer. Previously, aria attributes were stripped by the HTML sanitizer as unsafe.
• Support for skipping leading trivia in the lexer. Leading trivia, such as whitespace or comments, is confusing for developers looking at source-mapped templates.
• Logging has been made more configurable in the compiler-cli, with CLI usage and integrations such as webpack plug-ins to filter excessive log messages.
• An AbstractType<T> interface will match classes whether they are abstract or concrete. Casting as AbstractType<MyConcrete> will return a type that is not newable. This type will be used to match abstract classes in the get() functions of Injector and TestBed. 
• An update schematic called “template-var-assignment” is introduced to analyze template files to warn developers if template variables are assigned to values. The schematic comes with a driver for TSLint.
• For service-worker, multiple apps can be supported on different subpaths of a domain. Until now, the service-worker has cached data of multiple apps in cache DB files in a different domain. This has made apps break when switching from one app to another in the same domain. The new capability solves this issue.
• Support for TypeScript 3.3. Support for TypeScript 3.1 and TypeScript 3.2 will be dropped.
• The addition of a command-line flag to expose Bazel build files on disk.
• Modification of Bazel to copy the workspace and bazel files to the project root directory before invoking Bazel.
• Removal of components from a FormaArray. This provides a convenience. Previously, FormArray had to be looped, removing each component until empty.
• Providing external tooling the ability for async providers to finish resolving before the document is serialized.
• An update schematic for the @angular/core package to migrate to the explicit query timing syntax. This affects ViewChild and ContentChild query resolution. While not yet required, queries with Ivy will be dynamic by default. So, specifying an explicit query timing ensures that developers can migrate smoothly to Ivy, once Ivy is the default renderer.
• A JSON schema for service worker configuration.
• For Bazel, ts_config has been added to extend support for the ng_module. This also is a step toward enabling the importing of material2 as a Bazel dependency.
• For the router, a hash-based navigation option has been added to setUpLocationSync. With this change, developers now can pass an option to setUpLocationSync to ensure that location changes run in hash-based apps.
• In the Angular core, users now can define timing of ViewChild/ContentChild queries. Previously, an inconsistency in resolution timing could cause confusion and code depending on a query result could stop working.
• In the compiler, support has been added for tokenizing a subset of an input string and tokenizing escape strings.
• The compiler-cli no longer supports external symbols by default.
• With SASS backing for Bazel, rules are added to the workspace for a project requiring the SASS extension to CSS. With SASS, developers can write visual styles for a website in a more advanced language that is compiled to CSS.
• A performance improvement for smaller images that uses pngcrsh, an optimizer that makes images smaller for all PNG files.
• createinjector() is removed from the pubic API. Createinjector() is an API for the planned Ivy renderer, which is due in a beta form later this year. Plans call for re-exporting the API when Ivy is released
• Consistency of typeof checks, in which the sequence of strictly not equal to null followed by typeof value == 'object' is used when testing whether value is an object. This is being done because there is no point to using double equal with null because undefined is ruled out by the typeof check. The improvement also would avoid an unnecessary ToBoolean check.
• The TypeScript compiler transformer, ngtsc, is exposed as a plug-in, enabling wiring of ngtsc into an existing TypeScript compilation binary.
• For the compiler-cli, generated SASS/Less (Leaner Style Sheets) files are resolved to .css inputs.
• For forms, a control and descendant controls can be marked as touched.
• Also for Bazel, a bug fix has been implemented in which the node memory limit for ng-module has been increased to prevent out-of-memory issues with large modules. When memory is not released correctly or a process continues to use more and more of it, process failure can result.
• To improve performance for @angular/platform-server, Angular 8.0 uses a shared DomElementSchemaRegistry instance. This addresses a problem in which ServerRendererFactory2 creates a new instance of DomElementSchemaRegistry for every request, which is very costly. Reusing a single instance avoids overhead per request.
• Also for forms, Angular 8.0 exports NumberValueAccessor and RangeValueAccessor directives.
• Provide smaller bundle sizes and better startup performance for Bazel so applications will load quickly, even on slow mobile connections.
• Make Angular code easier to debug, even as applications grow larger.
• IMproved Bazel peed rebuild times.
• Improve Bazel template type-checking.
• Differential loading of modern JavaScript, with the command-line interface (CLI) producing both legacy and modern (ECMAScript 2015 and later) JavaScript bundles as part of the build process. These will be differentially loaded client-side to improve loading speed and time to interactive (TTI) for modern browsers.
• A backward compatibility mode for the Angular router to simplify upgrades for large projects.
• Improved web worker bundling, with bundling added to the CLI.
• Opt-in usage sharing, with Google collecting data anonymously on factors such as commands used and build speed.
• Dependency updates for tools such as TypeScript, Microsoft’s typed superset of JavaScript.

 

New features in Angular 7.2

Released in early January 2019, Angular 7.2 enhances router capabilities, including:

• The addition of the Navigation type during navigation. This offers target URLs, Navigation, and NavigationExtras data.
• Allow for passing of state to routerLink directives, as well as passing of state to NavigationExtras.
• Restoration of a whole object when navigating back to a page managed by the Angular router.
• The addition of the pathParamsOrQueryParamsChange mode for runGuardsAndResolvers. This provides an option in which guards and resolvers will ignore changes to matrix parameters. Guards and resolvers will be rerun when the path changes, when path parameters change, or if query parameters change. The primary use of this mode is when updating the UI and getting the URL in sync with local changes.

Also new in Angular 7.2 is an ng-schematics capability for the Bazel build tool. Schematics are created for building a project with an ng new command. Version 7.2 also has bug fixes for Bazel, the router, and the core of the framework.

New features in Angular 7.1

While considered a minor release mainly focused on bug fixes, the router in Angular 7.1 has added the pathParamsChange mode for runGuardsAndResolvers, meaning guards and resolvers will ignore changes to optional parameters such as query and matrix parameters. When the path or any params change, the guards and resolvers will run.

Other new features in Angular 7.1 include:

• A bug fix to the Ivy compiler so it now can generate inputs and aliases properly. The compiler had been generating an outdated input property format, resulting in SimpleChange objects not being properly generated, breaking some ngOnChanges hooks in forms tests.
• Also in the compiler, a bug fix generates a relative path only in summary file errors. Previously, errors in the summary file included absolute file names, which is considered undesirable, since the output of a build should not depend on the current working directory. This can cause nondeterminism issues in builds.
• The compiler now can mark an InvokeFunctionExpr as pure.
• For the core of the framework, a static dependency to @angular/compiler has been removed from @angular/core.
• A regression in the router has been fixed in which the navigateByUrl promise did not resolve on CanLoad failure.
• For service workers, typing has been added to the public API guard and lint errors have been fixed.

New features in Angular 7.0

Released in October 2018, Angular 7.0 has the following new features:

• Application performance has been improved by automatically adding or removing the reflect metadata polyfill, making applications smaller in production.
• Default bundle budgets have been introduced; they will warn users when applications exceed 2MB. There will be an error if the initial bundle exceeds 5MB.
• With the CLI Prompts capability, the Angular CLI can prompt users to help them make decisions. The ng new capability asks if users want to add routing and what type of styles to use, while ng add @angular/material asks users what theme they want and if they want gestures or animations.
• The CLI documentation has been integrated into the main Angular.io docs.
• For Angular Material and the CDK (Component Dev Kit), Angular 7 features visual improvements from the Material Design 2018 refresh as well as virtual scrolling, for dynamically loading and unloading parts of the DOM to build high-performing, large lists of data. Also, applications can be fitted with a drag-and-drop capability.
• Angular Elements components now support content projection via slots.

New features in Angular 6.1

Google’s Angular 6.1 arrived in late July 2018. Version 6.1 is slated to be the last minor release in the Angular 6.x line. 

Its router scroll position restoration lets developers configure the router to remember and restore scroll position while the user navigates an application. New events reset the scroll position; pressing the Back button restores the prior position. To turn this capability on, use this setting RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}). This capability is expected to become the default setting in a future release.

Angular Version 6.1 also adds ShadowDOM Version 1 view encapsulation, by which CSS is connected to components. The component decorator has better cross-browser support and is necessary for content project with Angular Elements. ShadowDOM improves on CSS and DOM, letting developers bundle CSS with markup, hide implementation details, and build self-contained components in vanilla JavaScript.

Angular 6.1’s scroll position management automatically resets or remembers a scroll when navigating around an application. This capability comes into play when using the Angular router. Developers have been building their own scroll positioning for Angular, but now they get this function out of the box.

Other capabilities in Angular 6.1 include:

• The ability to pipe an object through the keyvalue pipe, which provides an array suitable for use within an *ngFor.
• Schematics chaining has been improved through support for returning a rule from an existing rule. Developers can more dynamically determine rules to follow when designing schematics.
• TypeScript 2.9 is now supported, in addition to Versions 2.8 and 2.7.

New features in Angular 6.0

Version 6 continues an emphasis on being smaller, faster and easier to use. The new features include:

• Version 4 of the Webpack module bundler for JavaScript, generating smaller modules through a technique known as scope hosting.
• A new method of connecting modules and services, in which services can be “tree-shakable,” meaning they can be left out of an application if not used.
• Support for the RxJS 6 library for JavaScript, reducing bundle sizes for common use cases.
• The Angular command-line interface, bringing commands such as ng update, for updating dependencies and code. Another command in the CLI, ng add, helps developers more quickly add application features, such as starting out with a Material Design application rather than with a blank application. Material Design is Google’s language for designing applications. The ng add command also supports turning applications into progressive web apps, which support offline webpages.
• CLI support for libraries, with developers able to choose ng-packgr for transpiling libraries to an Angular format or use the Bazel tool to build libraries. Previously, developers had to build and package libraries by hand if they wanted to share components and services with other teams.
• Capabilities are included from the Angular Elements project, which packages components as reusable Custom Elements in an Angular application. A future release of Angular will make it possible to package Custom Elements for use in third-party applications, including those not using Angular.
• The Tree component in Angular Material and the Component Dev Kit to help visual tree structures such as a list of files.
• An optional, backward-compatible generic type to support typed nativeElement.

Along with the Angular 6 release, framework packages are being moved to Version 6 as well, including @angular/core, @angular/common, @angular/compiler, the Angular CLI, and Angular Material + CDK (Component Dev Kit).

New features in Angular 5

Despite the “5” designation, the AngularJS upgrade was just the fourth release for the framework, which was initially called AngularJS and debuted in 2012. Angular 5’s release took longer than expected, missing previous release targets of September 18 and October 23, 2017.

Key Angular 5 features include:

• An emphasis on making it easier to build progressive web apps, so apps can be cached in the browser. The progressive web apps concept, the product of a joint effort between Google and Mozilla, is about enabling development of browser-based apps that offer a superior, native-like experience. Google is still building support for capability in the command-line interface (CLI).
• A build optimizer that makes the application smaller by eliminating unnecessary code. (The build optimizer is a command-line tool.)
• Making Material Design components compatible with server-side rendering. Google needs to fix a few bugs before releasing this functionality.
• Angular Universal State Transfer API and DOM support, for sharing code between server- and client-side versions of an application.
• The compiler has been improved to support incremental compilation. The compiler operates as a TypeScript transform, for faster rebuilds.
• Pipes for internationalized number, date, and currency. This increases standardization across browsers and eliminates the need for i18n polyfills.
• To remove more polyfills, the ReflectiveInjector has been replaced with the StaticInjector. As a result, application size is reduced for most developers.
• Multiple names are supported for components and directives, which is useful in helping users migrate without breaking changes.
• Angular 5 has an updated Httpclient.
• CLI 1.5, which generates Angular 5 projects by default.
• For Angular forms, developers can run validation and value updates on blur and submit rather than on every input event.
• The RxJS reactive programming library has been updated to version 5.5.2 or later, featuring operators that eliminate the side effects of code-splitting and tree-shaking problems. Also, RxJS now distributes a version using ECMAScript modules, pulled in by default by the Angular CLI.
• Router hooks have been added for tracking router cycles from the beginning of running guards until completion of activation.

Angular 5 does have an issue with production build source maps, with some maps resulting in undefined sources for errors. Also, many previously deprecated APIs, such as Opaque Token, have been removed.

The history of Angular’s versions

Released in November 2017, Angular 5 followed closely the releases of versions 2 and 4, which arrived in September 2016 and March 2017, respectively, skipping over a version 3 designation. (Because the router for Angular already had reached version 4 by the time Angular 3 was due, Google just went right to calling the upgrade itself Angular 4.)

Although the original AngularJS JavaScript development framework already was a hit with developers, Google undertook a rewrite for the second generation, focused on better performance. “We couldn’t get more performance out of the old architecture,” Green said. Angular 2 was rewritten in TypeScript, Microsoft’s typed superset of JavaScript. “TypeScript let us do static analysis of source code. This is something we can’t do in JavaScript, so it becomes much more predictable,” Green said. TypeScript also lets Angular show developers errors in HTML templates.

Another feature added in Angular 2 was a compiler that sits in between written code and output shipped to a production application. This compiler optimizes the generation of template-rendering; code then can run at maximum speed in JavaScript virtual machines.

Angular 2 also offered a much cleaner component model. Interoperation with technologies such as web components was also a focus in Angular 2.

Angular 4, meanwhile, offered view-engine improvements and code-generation reductions. The Angular 4.3 upgrade, was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests.

Angular 4.3 also has an attribute, @.disabled, for conditionally disabling animations as well as new router life cycle events. Since the 4.0 version, Angular also enhanced animations so parent and child elements can be coordinated across page transitions.