What's new in Angular 6 and why shall we upgrade to it?

Angular 6 introduced a number of significant improvements and changes that make it a compelling upgrade for many projects. Here are some of the key features and reasons to consider upgrading to Angular 6:

Angular Elements

Angular 6 is the first release to fully support Angular Elements, which allows developers to use Angular components as custom elements in other projects, even if those projects don't use Angular. This opens up the possibility of reusing Angular components across different environments[2][3].

Service Worker Improvements

Angular 6 offers improved support for Service Workers, which are scripts that run in the web browser and manage caching for an application. This can lead to performance improvements, especially for mobile users, by allowing applications to load and run faster[2].

Ivy Rendering Engine

Although not fully integrated into Angular 6, the groundwork for the Ivy rendering engine was introduced. Ivy aims to provide faster compilation, smaller bundle sizes, better debugging, and improved versatility. It's designed to be backward-compatible with existing applications[1].

CLI Workspaces and Library Support

The Angular CLI was updated to support workspaces, which can contain multiple projects, such as applications and libraries. This makes it easier to manage projects that share code or are related. The CLI also improved support for creating and building libraries[2][3].

RxJS 6

Angular 6 updated its dependency on RxJS to version 6, which includes new features and a new import syntax that is more tree-shakable, resulting in potentially smaller bundle sizes[2][9].

ng update and ng add

The Angular CLI introduced two new commands: ng update and ng add. The ng update command helps developers update their Angular applications and dependencies with less effort, while ng add allows for the easy addition and configuration of new libraries[1][2][10].

Tree-Shakeable Providers

Angular 6 introduced tree-shakeable providers, which allow for services to be provided in a way that is more efficient for tree-shaking, potentially leading to smaller final bundle sizes. This is done by specifying the providedIn property in the @Injectable decorator[1][11].

Animations Performance

Angular 6 improved the performance of animations, enhancing the user experience by making web page transitions smoother[3].

Material Design ...