ANGULAR 5 VS ANGULAR 6

Hi there,
Since the complete shift from angularjs to angular 2, Angular Team have maintained the same system from angular 2 to 6.
Angular 6 has great bug fixes, amazing new features and much more.This Post is about the differences between Angular 5 and 6.

ANGULAR 5
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.

Conclusion
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.