yandex

Angular 6. What’s new?

Monday, 04 June 2018 12:57

On May 3, 2018, the Angular blog reported that Angular 6 had been released. What are the new features in the latest update? Will it be easy to migrate to the 6th version? And what new features does it have? Today, we will try to answer all these questions.

angular

Upgrade Difficulties

In theory, upgrading to the latest version doesn’t have to take lots of time and efforts. This is just a new service pack, and, not a brand new technology. The Angular team has planned to release such updates twice a year in order to make the transition easier. (This idea came up after the upgrade from AngularJS to Angular 2).

It is worth noting that upgrade difficulty depends on the previous experience with Angular, and, on which version you are upgrading from. If you upgrade AngularJS 1.0 to any Angular 2+ version, then that will be a difficult task.

The transition from Angular 5 to Angular 6 can also cause some difficulties, but it will extend the implementation of the animation and the ngModel forms abilities.

Cutting the long story short: new features

Support for TypeScript 2.7+

Support for 2.7 TypeScript simplifies the process of creating a conditional type declaration, default-initialized parameters, and strict class initialization of the class.

Angular Material with CDK (Component Development Kit)

CDK has become more stable and compatible with Angular 6. Many Angular Material2 components are built on the basis of CDK, which is an Agnostic development toolkit. Developers can use it to greatly improve creation of their components.

Bazel Compiler

Bazel is an assembly system used for almost all Google software products. When a part of a code is compiled with Bazel, the entire code is recompiled, but changes are applied only to that part. The compiler ensures advanced local and distributed caching, optimized dependency analysis, and parallel execution.

Ivy Renderer

Ivy Renderer is a new rendering engine, designed for backward compatibility with the existing renderer. It increases the rendering speed and optimizes the size of the final bundle.

NavigationSource and restoreState in NavigationStart

- With navigationStart you cannot see whether there was forced initiation of navigation or whether there was a change in location.

- navigationSource can identify the navigation source, for example, changing the URL / URI.

- restoreState provides a restored navigation identifier that leads to the current navigation.

Model and validation changes

Now the NgModelChange event is emitted after the value and validity are updated in the control element. Previously, it was emitted before the update.

Form template validators have been improved. Before version 6 was released, the template validators did not contain line boundaries (i.e., ^ and / or & and / or $), which sometimes led to an error. Now, the validators check the lines before adding borders. In other words, the validators will work with and without line borders.

Elements

A package of elements is designed to take advantage of the web components that are supported by the most modern browsers. That allows you to create an Angular component and publish it as a web component that can be embedded to any HTML page.

Angular CLI 1.7 and Angular 6

Support of Schematics is a workflow technology for web applications development. It can apply transformations to your project. For example, when creating a new component or updating a code fix changes in a dependency. You can also add a new configuration option or a new framework to an existing project.

Automatic ng updating. There is a new command that automatically updates Angular dependencies of CLI applications. All your @angular/* dependencies will be updated to the latest stable version. This feature will save time when upgrading to the next stable version.

Service worker security

Service worker is a script that is run in a web browser background. It is used to manage application caching. The new release contains the security-worker.js file, which is a part of the production bundle that helps to override the existing Service worker.

App Budgets

App Budgets is a feature in Angular CLI that allows you to set bundle size thresholds. You can configure messages/alerts to be displayed when the bundle size exceeds the specified threshold.

Some other minor improvements:

  • Support for single-line, multi-line and jsdoc comments in the code.
  • Ability to embed a resource in ngc. When angularCompilerOptions are set equal {enableResourceInlining: true}, all the templateUrl and styleUrls properties are to be replaced in @Component with the template or styles.
  • Improvements in error messages exchange with NgIf when using elements without a template.

So, these are the key features of the update and our opinion on them. Have you already used Angular 6? What are your thoughts on it? Feel free to share your ideas in the comment section below.


360


Item tags