Angular Framework Feature Matrix Evaluation Matrix :
Angular 6 VS Angular 7 VS Angular 8 :
Angular 6 Angular 7 Angular 8 Angular Element CLI Prompts Ivy Engine Service worker Virtual Scrolling Web Workers Internationalization (i18n) Drag and Drop Lazy Loading Bazel Compiler Bundle Budget Improvement in ng-upgrade ng-add / ng-update Angular Compiler Support for Node 10 ng-update Angular Do-Bootstrap CLI workflow improvements ngModelChange Better Error Handling Upgrading Angular Material TypeScript 2.7 support TypeScript 3.1 support TypeScript 3.4 support Improved decorator error messages New ng-compiler Differential Loading <ng-template> updated to <template> Native Script Improved Web Worker Bundling
| Angular 6 | Angular 7 | Angular 8 |
|---|---|---|
| Angular Element | CLI Prompts | Ivy Engine |
| Service worker | Virtual Scrolling | Web Workers |
| Internationalization (i18n) | Drag and Drop | Lazy Loading |
| Bazel Compiler | Bundle Budget | Improvement in ng-upgrade |
| ng-add / ng-update | Angular Compiler | Support for Node 10 |
| ng-update | Angular Do-Bootstrap | CLI workflow improvements |
| ngModelChange | Better Error Handling | Upgrading Angular Material |
| TypeScript 2.7 support | TypeScript 3.1 support | TypeScript 3.4 support |
| Improved decorator error messages | New ng-compiler | Differential Loading |
| <ng-template> updated to <template> | Native Script | Improved Web Worker Bundling |
Major Differences between Angular 4 vs Angular 5
Angular 4 Angular 5 TypeScript 2.1 and 2.2 is supported TypeScript 2.5 is supported Faster and compact Build optimizer Angular Universal Angular Universal & State Transfer *ngif & 8 *ngfor improvements Compiler Improvements ng-add / ng-update Angular Compiler Animation Support Improved Decorators ngModelChange Better Error Handling HTTP Request Simplified Improvement on HttpClient Enhancement in Router New Router Life Cycle Improvement Internationalization Internationalization Number, Date, Currency, Pipe Apps Testing Simplified Replaced reflectiveinjector & static injector added exportAS & Angular CLI 1.5 Update on Blur / Submit
| Angular 4 | Angular 5 |
|---|---|
| TypeScript 2.1 and 2.2 is supported | TypeScript 2.5 is supported |
| Faster and compact | Build optimizer |
| Angular Universal | Angular Universal & State Transfer |
| *ngif & 8 *ngfor improvements | Compiler Improvements |
| ng-add / ng-update | Angular Compiler |
| Animation Support | Improved Decorators |
| ngModelChange | Better Error Handling |
| HTTP Request Simplified | Improvement on HttpClient |
| Enhancement in Router | New Router Life Cycle |
| Improvement Internationalization | Internationalization Number, Date, Currency, Pipe |
| Apps Testing Simplified | Replaced reflectiveinjector & static injector |
| added exportAS & Angular CLI 1.5 | |
| Update on Blur / Submit |
Difference between Angular 4 and Angular 5
Angular 4 Angular 5 Support for Router ParamMap New Router Lifecycle Event Dynamic Components with NgComponentOutlet Compiler Improvements TypeScript 2.4 with this version that functions as a JavaScript superset that can be used for optional static typing, interfaces, and classes Angular 5 comes with build optimizer which is a part of the platform's command like a tool. HTTP Request Simplified Optimization with HttpClient Feature Includes Animation Package Internationalized Date & Currency
| Angular 4 | Angular 5 |
|---|---|
| Support for Router ParamMap | New Router Lifecycle Event |
| Dynamic Components with NgComponentOutlet | Compiler Improvements |
| TypeScript 2.4 with this version that functions as a JavaScript superset that can be used for optional static typing, interfaces, and classes | Angular 5 comes with build optimizer which is a part of the platform's command like a tool. |
| HTTP Request Simplified | Optimization with HttpClient Feature |
| Includes Animation Package | Internationalized Date & Currency |
Angular 2 VS Angular 4
Angular 2 Angular 4 Size and Speed Applications built on Angular 2 are bulky in size with moderate speed. With building application on Angular 4 it will be of less space consuming and faster than Angular 2. Animation Package Animation was under and part of main core “@angular/core” with if you use it or not animation is going to be part of production bundles. Here Animation is altogether separate package and it can be referred as“@angular/platform-browser/animations” with this animation would not be part of production bundle if not used. View Engine Here traditional mode is available where we have compilation during runtime and not build time so error occurred can only be seen during runtime. With apply of AoT(Ahead of time) compilation mode compilation is done during build time and JS code is generated with certain changes can be been seen in reduction of size up to 60% in most cases resulting in production bundle file size reduction by hundreds of KB. Template In Angular 2 normal template tag are used Now with the recent Angular 4 it has its own template tag called as the “<ng-template>”. If you miss this tag representation then you will get warnings for the same. Router In Angular 2 interface syntaxes were used “params” and “queryParams” New interface “paramMap” and “queryParamMap” is added for use which also helps to represent the parameters of a URL. Pipes There was no provision of “Pipes” in Angular 2. In Angular 4, introduction of the concept of “Pipes” occurred due to which uppercasing the first letter of the word becomes automatically possible.
| Angular 2 | Angular 4 | |
|---|---|---|
| Size and Speed | Applications built on Angular 2 are bulky in size with moderate speed. | With building application on Angular 4 it will be of less space consuming and faster than Angular 2. |
| Animation Package | Animation was under and part of main core “@angular/core” with if you use it or not animation is going to be part of production bundles. | Here Animation is altogether separate package and it can be referred as“@angular/platform-browser/animations” with this animation would not be part of production bundle if not used. |
| View Engine | Here traditional mode is available where we have compilation during runtime and not build time so error occurred can only be seen during runtime. | With apply of AoT(Ahead of time) compilation mode compilation is done during build time and JS code is generated with certain changes can be been seen in reduction of size up to 60% in most cases resulting in production bundle file size reduction by hundreds of KB. |
| Template | In Angular 2 normal template tag are used | Now with the recent Angular 4 it has its own template tag called as the “<ng-template>”. If you miss this tag representation then you will get warnings for the same. |
| Router | In Angular 2 interface syntaxes were used “params” and “queryParams” | New interface “paramMap” and “queryParamMap” is added for use which also helps to represent the parameters of a URL. |
| Pipes | There was no provision of “Pipes” in Angular 2. | In Angular 4, introduction of the concept of “Pipes” occurred due to which uppercasing the first letter of the word becomes automatically possible. |
Angular JS VS Angular 2
Angular JS Angular 2 Released by Google in the year 2010. Released in Sept 2016. JavaScript-based framework for creating SPA. Complete re-write of AngularJS version. Still supported but no longer will be developed. It's updated version regularly released because of Semantic Versioning. The architecture of AngularJS is based on MVC. The architecture of Angular 2 is based on service/controller. AngularJS was not developed with a mobile base in mind. Angular 2 is a mobile-oriented framework. AngularJS code can write by using only ES5, ES6, and Dart. We can use ES5, ES6, Typescript to write an Angular 2 code. Based on controllers whose scope is now over. Nowadays, the controllers are replaced by components, and Angular two is completely component based. Factory, service, provider, value and constant are used for services The class is the only method to define services in Angular2 Run on only client-side Runs on client-side & server-side ng-app and angular bootstrap function are used to initialize bootstrapmodule() function is used to initialize
| Angular JS | Angular 2 |
|---|---|
| Released by Google in the year 2010. | Released in Sept 2016. |
| JavaScript-based framework for creating SPA. | Complete re-write of AngularJS version. |
| Still supported but no longer will be developed. | It's updated version regularly released because of Semantic Versioning. |
| The architecture of AngularJS is based on MVC. | The architecture of Angular 2 is based on service/controller. |
| AngularJS was not developed with a mobile base in mind. | Angular 2 is a mobile-oriented framework. |
| AngularJS code can write by using only ES5, ES6, and Dart. | We can use ES5, ES6, Typescript to write an Angular 2 code. |
| Based on controllers whose scope is now over. | Nowadays, the controllers are replaced by components, and Angular two is completely component based. |
| Factory, service, provider, value and constant are used for services | The class is the only method to define services in Angular2 |
| Run on only client-side | Runs on client-side & server-side |
| ng-app and angular bootstrap function are used to initialize | bootstrapmodule() function is used to initialize |
