Are you ready for Angular 6?

Valentyn Yakymenko

Angular 6 is released. Many of us will be curious about kind of features that was released and overall the advantages we get with this release.

This release makes Angular lighter, faster and has many interesting features. Let’s take a look at them.


Angular Elements

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

Transforming a component to a custom element provides an easy path to creating dynamic HTML in your Angular app.


Ivy Renderer

Ivy Renderer is new rendering engine which is designed to be backwards 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.

If you want better understand Ivy Renderer take a look here.


Bazel Compiler ( Not in this release )

With this release, we will start having the Bazel compiler support. When you compile the code with Bazel Compiler, you will recompile entire code base, but it compiles only with necessary code. It used advanced local and distributed caching, optimized dependency analysis and parallel execution.


RouterModule Changes

Addition of navigationSource and restoredState to NavigationStart

Currently, in NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. With navigationSource in place, the source of the navigation e.g scroll position or URL/URI change can be identified. restoredState will give the restored navigation id which leads to current navigation. These two properties help us to handle multiple use cases in routing.


FormsModule Changes

NgModelChange

Now this event is emitted after value and validity are updated on its control. Previously, it was emitted before updated. As the updated value of the control is available, the handler will become more powerful.

Form Control statusChanges

Angular 6 emits an event of PENDING when we call AbstractControl markAsPending.

Form pattern validators improvement

Before Angular 6, pattern validators should not contain line boundaries i.e ^ and/or & and/or $. Previously Validator used to add these line boundaries to the validation pattern automatically without cross-checking the existence of these line boundaries. Because of this when the developer provides line boundaries in the validator pattern Validations used to fail. Now validators checks before adding line boundaries that mean Validators will work as expected with or without line boundaries.

Added multiple validators for array method of FormBuilder

Before Angular 6, there was no way to pass multiple validators to the formBuilder.array method which is allowed now.


Animations Performance Improvements

New implementation of Angular Animations that no longer require web animations polyfill. Now your application will be for 47KB less if you use animations.


Angular CLI 1.7

Schematics Support

Schematics is a workflow technology for the modern web application development which can apply transforms to your project, like create a new component, or updating your code to fix breaking changes in a dependency Or to add a new configuration option or new framework to an existing project. This helps to build your scaffolding to the application to help developers in Ease of Use and Development and Reusability.

ng update

We have now a command to update the Angular dependencies of our CLI applications automatically. All your @angular/* dependencies will be updated to the latest stable version which includes all the core packages in your dependencies and devDependencies like rxjs, zone, typescript etc.., and also the CLI itself.

ng add

New command ng add that will add a new capability to your project. It was using your package manager to download new dependencies and invoke an installation script which can update your project with configuration changes, add additional dependencies, or scaffold package-specific initialization code. That is very powerful because we all know how hard to manage dependencies in large projects, especially with significant updates.


Safety Worker (Service Worker)

Sometimes, e.g. when we are deploying the latest version of the app we may need to deactivate/uninstall the existing service worker. At this point, there is no straight way to disable service worker. To full fill this need, this new release contains new script file safety-worker.js which will be part of production bundle which in turn helps us to unregister existing service worker.


App Budgets

App Budgets is a feature in the Angular CLI which allows you set thresholds for the size of bundles. We will able to configure error messages/warning messages when bundle size grows beyond the configured threshold.


Valentyn Yakymenko

Written by

Front-End Architect at Codeminders | Passionate about web performance optimization. | Code hard, learn more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade