Angular 6 Release vs. Angular 5: New Features and Improvements

DZone 's Guide to

Angular 6 Release vs. Angular 5: New Features and Improvements

Check out this introduction to some of the newest features introduced in Angular 6, and how they are an improvement over Angular 5.

· Web Dev Zone ·
Free Resource

Calling all Angulars!  Angular 6 is out, a major release from Team Angular.

Great new features, annoying bug fixes and much more, the latest Angular Version holds new exciting things for us. Let's do an in-n-out of Angular 6 to see if it lives up to the hype, and while we do that, I would also like to compare Angular 5 with 6 to see what are the differences and upgrades in this latest version release.

I also did an article on Angular 4 vs 2. Be sure to check that out if you want to dig deeper into how Angular evolved over the years.

Angular is one of the most popular JS Frameworks for crafting web and mobile apps. In a single sentence, Angular is a single framework for mobile & desktop.

As of today, around 450K people search for the word "Angular" per month. Imagine how many use it.

Given the fact that Google actively maintains Angular, the tooling and support are exceptional. The latest Angular version came within six months of its predecessor release, still a little later than the Angular developer community was expecting.

To recap, Let's first look at what the Angular version 5 offered us.


Angular 5 showed up on November 1, 2017. With the promise of speed and a smaller size, it gave us the following features.

The HttpClient

One of the greatest anticipated changes from version 4.3 was being able to say goodbye to the Http library.

Instead, they introduced the HttpClient API, which is faster, more secure and efficient than its predecessor. Although this API came with the 4.3 version update, as of Angular 5, Http library was depreciated.

Some Great Benefits of the HTTPCLIENT API

  • Response body access included support for JSON types and was typed synchronous.

  • JSON became an assumed default and no longer had to be parsed explicitly.

  • With the use of Interceptors, you could use middleware logic and insert it in the pipeline.

  • Request/response objects were immutable.

  • Request upload and response download could utilize progress events.

Multiple Export Aliases

In the previous version, when you exported components you could only give them one name. With Angular 5 you could give multiple names to your components and directives when exporting them.

How was that helpful?

By exporting a component with multiple names, you could migrate without breaking changes to those components.

Internationalized Number, Date, and Currency Pipes

Angular 5 introduced new pipes for dealing with numbers, dates, and currencies. This increased the standardization of the process of internationalization across browsers and eliminated the need to use polyfills to achieve it this result.

Improved Decorator Support

With the release of Angular 5 came expression lowering in decorators for lambdas. You could also use lambdas instead of functions with proper names.

Build Optimization

One of my favorite things about Angular 5 is the Build Optimizer. This is probably the main reasons that Angular 5 is fast and produces smaller sized builds.

As the name suggests, you get an optimized build of your app by size and speed.

First of all, a reminder, Angular 5 production builds crafted with Angular CLI are optimized by default.

Now what the Build Optimization did was it used the tree shaking technique to remove "dead" code from your app at runtime, so only processing code was used at that time. This, in turn, decreases the build size and boosts the app load speed.

Compiler Improvements

Another enhancement contributing to the quickness of Angular 5 was the Compiler adjustments. In Angular 5, the compiler supports incremental compilation. This provided faster re-builds of the applications, especially for production builds and compilations with AOT (Ahead of Time).

In addition, the compiler uses TypeScript transforms, a new feature introduced as part of TypeScript 2.3.

These were some of the highlights of the Angular version 5. In light of that, let's look at what Angular 6 brought us.

Angular 6

Angular 6 was released on May 4th, 2018. That is 6 months after its predecessor's (Angular 5) release. The highlights of Angular 6 include the Angular Command Line Interface (CLI), The Component Development KIT (CDK) and the Angular Material package update. The cherry on top, all three are shipped as part of Angular 6, not separate updates.

Let's get to the gritty details by first knowing that Angular 6 uses the RXJS library, so hurray for reactive programming for web!

Moving on, this version release is more focused on the tooling and support rather than the whole framework.

The Angular Material Design Library

A new Tree component is now added in the Angular Material Design Package and the Component Dev Kit. It allows you to visualize tree structures in a more hierarchical order, like a list of files, for example. These new tree components come in both styled and un-styled versions, (Material’s mat-tree) and (CDK’s cdk-tree) respectively.

Angular Elements

Remember the Elements package? Angular 6 fully supports it now. What it did was allow us to use Angular components outside of Angular like in JQuery or VueJS apps.

This package primarily focuses on taking an advantage of web components that are supported by all modern web browsers (except Edge). Using the Elements Package, you can create Angular components and publish them as Web Components, which can then be used in any HTML page.

Turning a component into a custom element gives you an easy path for creating dynamic HTML content for your Angular app, and, using the Angular Elements package, it is even easier to create native custom elements.

Component Dev Kit (CDK)

The CDK was released in December of 2017, but the Angular Team has made some really neat improvements to it for the 6th version.

With the CDK you can now build your own library of UI components without using the Angular Material library. It also supports Responsive Web Design layouts so you don't have to use other libraries like Flex Layout or even learn using the CSS Grid. It covers them all.

Another brilliant improvement in the CDK includes the @angular/cdk/overlay package. This one has a new positioning logic that makes your pop-ups stay on screen very brilliantly.

Command Line Interface (CLI)

The Angular command-line interface is now equipped with new commands such as  ng-update , which updates dependencies and code, and ng-add , which helps quickly add application features and also supports turning applications into progressive web apps.

Other than these new commands, the new CLI also allows developers to choose the ng-package for transpiling different libraries using the Bazel tool. Without the Bazel tool, you would have to build and package libraries yourself and trust me, the Bazel tool is a Godsend!

An Improved Service Worker

You can configure navigation URLS with the improved Service workers in Angular 6.

Web Pack Updated

Web pack module bundler has been updated to version4. By using the scope hosting technique, modules created will now be smaller.

Tree Shakable Services

You can apply Tree shaking on services as well. How great is that!

Multiple Validators For Your Forms

Those of you who had to fuss about passing more than one validator in your Formbuilders, your prayers have been answered because Angular 6 now allows you to pass multiple validators to the formBuilder.

Happy validating!


Angular 6, in all its glory, demands that you test it yourself to fully realize the new adjustments and features. Some features click more to some developers. To me, these are my pain points resolved. What is your answered prayer with the latest Angular version 6? Let me know in the comments.

angular, angular 2 example, angular 4, angular 5, angular 5 course, angular app development, angular applications, comparison, web design and web development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}