Comparison Between Angular 4 vs Angular 5

Angular is a javascript framework developed by Google to create dynamic single page web applications. HTML and Javascript are the core features of Angular. In last few years, Angular has emerged tremendously, the Angular team introduces AngularJS in 2010 and it has advanced form from angular version 1 and all the way to version 5 and they are planning to release the latest Angular version 6 pretty soon.
The AngularJS Development Company makes use of the features provided by the team Angular which brought major improvements of the developed code size. It provides great impact on an application performance and security.

The Angular framework increased popularity among web app developers, and as promised they have updated the framework twice in a year to make Angular effective and more user-friendly. Angular 4 was released in March 2017 & in the latest version, Angular 5 was released on 1st Nov 2017. Google also committed to providing the backward compatibility for all the new releases with their previous versions.
Angular 5 is not thought of as an entirely new framework. It’s basically just updated version of Angular 4 with a few additional features that enhance performance. Updating their Angular 4 applications to Angular 5 is unlikely to introduce any frustrating breaking changes for the developers.

Angular 2
AngularJS had many flaws and most of them were related to performance, so they introduced angular 2 thanks to the support for offline compilation and fast change detection. The support for dynamic loading and asynchronous templating are features that help in improving the page load and response times considerably.

Angular 2+ got everything you need to build a complicated frontend web or mobile apps, form handling, data management, HTTP services, and so much more. Angular 2 is entirely component-based so that controllers and $scope are removed in favor of ES6 classes.

• Javascript VS TypeScript in Angular 2
• Directives Support
• Improved Dependency Injection
• Improved data binding
• Support for a component-based architecture
• Cross-platform Support
• Improved routing

Major differences and improvements between Angular 4 vs Angular 5

Angular 4
Angular has everything to build a responsive web app with a ton of business logic. The version 4 is the result of a complete rethinking of Angular version 1. While some of the basic concepts like modules, controllers, scopes, and directives were removed or replaced, still there is a feeling that the framework is too complex. Thus it requires a higher level of development skills.Everything that applies to Angular 4 will also apply to version 5 and beyond.

Animation Package:
They've pulled animations from the Angular core and set them in the separate package. In case you don't use animations, this excess code won't end up on your creation packages.This feature will also enable you to easily find docs and to take advantage of auto-completion. You can add animations to main Ng-Module by importing the Browser Animations Module out of @angular/platform-browser/animations.
Angular version 4.3 also provides an attribute @disabled, for temporarily disabling animations as well as new router life cycle events. Since the 4.0 version, Now parent and child elements can be coordinated across page transitions as team Angular has enhanced its animations.

NgIf with Else:
Now we can use else statement with ngIf along with an improvement on *ng-If and *ng-For and both can be achieved in Angular 4 and Angular 5.

using else :

<div *ngIf="isValid;else other_content">

    content here ...

</div>

<ng-template #other_content>other content here...</ng-template>

you can also use then else :

 <div *ngIf="isValid; then content
       else other_content">   here is ignored  </div>

<ng-template #content>content here...</ng-template>

<ng-template #other_content>other content here...</ng-template>

or then alone :

<div *ngIf="isValid;then content"></div>

<ng-template #content>content here...</ng-template>

Template
The template is now ng-template tag instead of as <template> caused conflicts with other usages of the <template> tag It still works, therefore the Angular team changed it to use <ng-template> for Angular purposes.If you use the deprecated template somewhere when you update to Angular 4, so it will be easy to spot them and will pop a warning. It’s a breaking change; therefore they didn’t introduce this change in Angular-2 but only in Angular-4.

TypeScript 2.1 and 2.2 Compatibility
TypeScript is an open source programming language developed Microsoft. It is a strict syntactical superset of JavaScript which primarily provides optional static typing, classes, and interfaces. The group has upgraded Angular to TypeScript version 2.2. This will enhance the security of Angular applications and rate of ngc and you'll receive far better type checking during your program.

StrictNullChecks
Set skipLibCheck to true in your tsConfig file to enable strictNullChecks in an Angular CLI project which is introduced in Angular 5.The Angular Universal project enables the developer to do a server-side rendering of an Angular application. Previously the project was mainly maintained by the community, but now it's officially a part of Angular.The majority of this Angular Universal code is currently located in @angular/platform-server. and if you want to get familiar with this library you can check out the git repo of angular/universal.

Angular 5
When Angular 5 was released, it came with a whole bunch of new features, service improvements, and bug fixes from version 4. They have added very interesting features like the main focus of Angular version 5 is to make angular faster, with improved loading time as well as execution time. New build optimizer which helps to reduce the code of progressive apps designed through a framework.

Built Optimizer
Built Optimizer included Angular CLI to help the developers in creating a smaller bundle which makes the application lighter and faster by removing unnecessary runtime code as well as unnecessary additional parts. It reduces the size of javascript files to improve the performance.

Angular Universal State Transfer
If we have a screen with multiple dropdowns(Let's say Country and states), we will end up with multiple HTTP requests from the client to the server. Server transfer state collects information as part server side and then transfers it to the client side so that there is no need to be regenerate present information which improves the perceived performance of an application.

Compiler Improvements
The diagnostics produced by the compiler have been slightly improved, specifically when decorators contain unsupported or incorrect expressions which provide faster rebuilds, especially incremental compilation for production builds.

HttpClient

Version 4.3 was launched with HttpClient within @angular/common as a smaller, simpler and more powerful way to make web requests in Angular. we were using @angular/HTTP module for all kinds of HTTP requests.From Angular 5 onwards, the Angular team recommends using it HttpClientModule which comes under @angular/common/HTTP package for all applications, and stop using the "traditional" library @angular/HTTP that is marked as obsolete.
To update HttpClient it is necessary to replace in all the modules HttpModule by HttpClientModule (that is in @angular/common/http), inject the service HttpClient and eliminate all the calls from,map(res => res.json()) that is no longer necessary.

AppShell
In Angular 5 they have added support to AppShell. It uses the router to render your application.If can add AppShell in your project by simply using the below command –ng generate app-shell

Preserve Whitespace
In earlier versions of Angular, unnecessary new lines, tabs and white spaces were created during the build. With the new Angular 5, one can now choose whether or not to restrict newlines, tabs, and white spaces coming from your components and your application.

If you want to restrict them only for DemoComponent  then below is the sample code,

@Component({ 

templateUrl: 'demo.component.html', 

preserveWhitespaces: false 

} 

export class demoComponent {}

If you want to restrict them throughout the application level then below is the sample code in config.json file.

"angularCompilerOptions": { 

"preserveWhitespaces": false 

}

Conclusion

Angular 4 vs 5 which is the best frameworks for web development and choosing one will always be challenging as these frameworks always get updated over the period so it totally depends upon your project details, client's requirements, the complexity of a project. The application development using Angular provides more secure, flexible and scalable and after Angular 4 the performance has improved amazingly.

It is really simple to upgrade from Angular 4 to Angular 5, but there are no major changes introduced in Angular 5 so upgrade only if the application demands and read more for Angular Update Guide 

Major Differences between Angular 4 vs Angular 5