Difference between Angular 2 , Angular 4 and Angular 5, Angular 6


The first version of Angular now officially called as AngularJS was released in the year 2010. Then Angular 2 was released as a major release which was written newly from scratch. AngularJS and Angular 2 are totally different from each other. Angular 2 are completely based on components which makes it more reusable. Angular 2 is much faster and robust as compared to AngularJS. It supports mobile devices as well unlike AngularJS. We can use a variety of languages with Angular 2 like TypeScript, JavaScript, Dart, PureScript, etc. Unit testing is easy in Angular 2. 
  • Angular 2 - robust, faster and scalable framework.
  • Components based structure.
  • Support web, desktop, and mobile.

Differences between Angular 2 and Angular 4

Although after a major release after AngularJS, the angular team has maintained the same system and structure from Angular 2 to 7. Angular 4 design pattern is the same as Angular 2. It's an enhanced inherited version of Angular 2. Angular 4 supports typescript which compiles to Javascript and shown in the browser. The major differences between the versions after Angular 2 are described below. 

Additional features of Angular 4

  • Typescript 2.1+ - Angular 4 supports the powerful features of Typescript 2.1+.
  • AOP Compilation as View Engine - In AOT, Angular compiles your code at build time whereas in Just in Time mode (JIT mode) the compilation is done at runtime. You will come to know about error of the code during build time itself. The bundle size small with AOT as well as conserving the same performance. 
  • Reduces the size of the generated bundled code to 60%.
  • Animations - Animation package moves out of the @angular/core package. Now we have a dedicated package for animations which is @angular/animations. So if the animation is not the part of your project, the unnecessary animation package code will not be part of the production bundles.
  • New titlecase pipe - A new titlecase pipe is introduced. This pipe converts the first letter of each word to uppercase.
  • Support for an if-else statement - Now we can use else in ngIf statement. We can use else clause in a ngIf condition.
  • <div *ngIf="condition; else elseBlock">
      Template will render if the condition is true.
    <ng-template #elseBlock> This will render if the condition is false.</ng-template>
  • Support for email validator.
  • The new interface in Router - A new interface is added to represent the parameters of the URL which is ParamMap. This interface will provide get() and getAll() methods to retrieve one and all values of the URL parameters respectively.

Difference between Angular 4 and Angular 5 

Angular 5 is designed with a perspective of faster speed and performance with improved loading and execution time. The features are defined below:
  • HttpClient - HttpClient was launched within @angular/common as a smaller and powerful module to make web requests. We were using @angular/Http module till now. Angular recommends using HttpClient which comes under @angular/common/HTTP for all applications for better performance and scalability. Inject the HttpClient module as a dependency in your component constructor and use it in your project.
  • Angular Universal State Transfer.
  • Built Optimizer - It helps Angular CLI to build a smaller bundle than before. It makes our application faster and lighter but doesn't have any effect on the performance. Size of the javascript files is reduced without degrading performance.
  • Preserve Whitespaces - During build process in Angular we can see unnecessary lines, spaces and tabs are created which is not required but consumes extra space. But with Angular 5 we can restrict all this to get generated at component and application-level both.
  • If you want to restrict at the component level, then add as below in your ts file of the component:
       templateUrl: 'test.component.html', 
       preserveWhitespaces: false 
    export class testComponent {}
    If we want to restrict for the entire application, we need to put the below code in config.json file.
    "angularCompilerOptions": { 
       "preserveWhitespaces": false 
  • AppShell - In Angular 5 we have support for AppShell as well. It uses the Angular Router to render the application. -ng generate app-shell command is used.
  • Internationalised data and currency with the introduction of new pipe - In earlier versions of Angular, we were depending on i18n to support internalization. But now we have a new date, number, and currency pipes which increases internationalization across all browsers. There is no need for dependency on the i18n polyfills from now on. Whenever we need different formats depending upon the country, we can use pipes.
  • Improved in faster compiler support - Improvement is accomplished in Angular to make the development build faster using ng serve/s --aot command
  • New Router LifecycleIn Angular 5 few new life cycle events have been added to the router and those are ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart, and ResolveEnd.
  • Support Typescript 2.3.
  • Improved decorator support - We can use lambda expression instead of naming conventions which is a beautiful feature of Angular 5.

Difference between Angular 5 and Angular 6

The Angular 6 is released after six months of the release of Angular 5. The powerful features of Angular 6 are as follows:
  • The Angular Material Design Library - A new Tree component is added in the material library. It allows us to visualize the tree structure in a hierarchical view. The tree component comes in both styled and unstyled versions.
  • Angular elements - Angular 6 supports the element package fully. Using this package, we can use Angular components outside Angular in Jquery and other technology apps. Using this package, we can create Angular components and publish them as web components in one go.
  • Component Dev Kit (CDK) - With CDK, we can build our own UI component without using Angular Material library. Responsive Web Design is also supported now with this. Another powerful feature of CDK is it includes @angular/cdk/overlay package that has a new logic for positioning different elements on the screen.
  • Command Line Interface (CLI) - The Angular CLI has new commands now which are:
    ng-update - update dependencies and code.
    ng-add - add application features and helps in turning applications into progressive web apps.
  • Web Pack updated - Webpack is updated to version 4. Modules created will be of smaller size with this new web pack.
  • Tree Shaking - Can apply tree-shaking to services.
  • Multiple validators for forms - With Angular 6 we can pass multiple validators to the formBuilder which is a brilliant feature. This makes our work easy as we can combine validators for the single element at once.


Post a Comment