What is new in Angular 6?

The wait is over! Angular v6 is released on May 4, 2018, this is the first release of Angular that unifies the Framework, Material, and CLI.

Angular is a Google’s popular JavaScript framework for building mobile and desktop applications. It provides dependency injection, particularly useful for assembling data services for applications. It uses HTML template to compose components that connect to TypeScript code for imperative parts of the program.

Angular v6 makes Angular lighter, faster and easier. Developers will start loving it more as it makes their development further easy.

Now, take a look at the new changes in Angular 6-

RxJS 6

Angular 6 now uses RxJS 6 internally and requires you to update your application also. RxJS 6 changed the way to import things. It brings a few major changes, along with a backward compatibility package rxjs-compat that will keep your applications working. It’s more tree-shakable now, ensuring that only the pieces of RxJS that you use are included in your production bundles.

CLI Workspaces

CLI v6 now offers support for workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration. Each CLI workspace has projects, each project has targets, and each target can have configurations.

Stable Angular Material with CDK

Angular Material2 is more stable and compatible with Angular 6. Many Angular Material2 components are built on top CDK Toolkit which is the Design agnostic toolkit. With this release CDK Toolkit is stable and Developers can use this toolkit to build their own components with less effort as this toolkit already has most of the commonly used utilities to build components.

Tree-shakeable providers

There is now a new, recommended, way to register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute. It accepts 'root' as a value or any module of your application. When you use 'root', your injectable will be registered as a singleton in the application, and you don’t need to add it to the providers of the root module.

Ivy renderer

Ivy Renderer is new rendering engine which is designed to be backward compatible with existing render and focused to improve the speed of rendering and it optimizes the size of the final package. For Angular, this will not be default renderer, but you can manually enable it in compiler options.

Elements

This package is primarily designed to take an advantage of web components that are being supported by all modern browsers except Edge browser. This will allow you to create an Angular component and publish it as a Web Component, which can be used in any HTML page.

Forms Validation

In Angular 6, ngModelChange is now emitted after the value is updated on its form control.

Improved Service Worker Support

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will redirect navigation requests that don't match any asset or data group to the specified index file. By default, a navigation request can have any URL except for those containing __ and URLs containing a file extension (a .) in the last path segment. Sometimes it's great to be able to configure different rules for the URLs of navigation requests.

ng update

This new CLI command analyzes your package.json and uses its knowledge of Angular to recommend updates to your application. In short, it will help you adopt the right version of dependencies, and keep your dependencies in sync, but 3rd parties can provide update scripts using schematics.

ng add

This new CLI command promises to make adding new capabilities to your project easy. It uses your package manager to download new dependencies and invoke an installation script implemented as a schematic which can update your project with configuration changes, add additional dependencies (example. polyfills), or scaffold package-specific initialization code.

TypeScript 2.7+ support

With the support for 2.7 in place, now it will be much easier to code with conditional type declarations, default declarations and strict class initialization.

Better URL Serialization

In Angular 6, URI fragments will now serialize the same as query strings. In the URL path, (portion prior to the query string and/or fragment), the plus sign (+) and ampersand (&) will appear decoded, parentheses values (( and )) will now appear percent-encoded as %28 and %29 respectively, and semicolons will be encoded in their percent encoding %3B.

Token Marking

It's now possible to determine which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a BrowserAnimationsModule or NoopAnimationsModule context at runtime.

Multiple Validators for Form Builder Array

In Angular 6, you can set multiple validators with the FormBuilder.array method.

Long Term Support

The Angular team previously announced that only v4 and v6 would be LTS releases but the good news is that long-term support has been extended to ALL major releases starting with v4. Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bug fixes and security patches.