Angular6 Vs Angular5

Angular 5

Angular 5 showed up on November 1, 2017 with the promise of speed and a smaller size.

The key features of angular 5 are:

1.  The HttpClient is faster, more secure and efficient than its predecessor.

Some Great Benefits of the HTTPCLIENT API

• Response body access included support for JSON types and was typed synchronous.
• JSON no longer had to be parsed explicitly.
• With the use of Interceptors, you could use middleware logic to modify request both before they are sent and after they return.
• Request upload and response download could utilize progress events.

2.  Multiple Export Aliases

With Angular 5 we could give multiple names to our components and directives when exporting them. Exporting a component with multiple names can help users migrate without breaking changes.

3.  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 this result.

4.  Improved Decorator Support

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

5.  Build Optimization

This is probably the main reasons that Angular 5 is fast and produces smaller sized builds.

6.  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).

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.

This version release is more focused on the tooling and support rather than the whole framework.

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

2.   Angular Elements

Angular 6 fully supports Elements package now. It allows 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.

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

4.   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!

5.   An Improved Service Worker

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

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.

7.   Tree Shakable Services

You can apply Tree shaking on services as well. How great is that! Angular Tree Shakeable Providers give us better performance in our applications as well as reducing the amount of boilerplate code needed to create injectable services.

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