find and solve || findandsolve.com
Please wait.....

Welcome back.






Before Read Terms of use

Difference Between angular 2, 4, 5 6 7 Breakdown, New Features, and Changes

Difference Between angular 2, 4, 5 6 7 Breakdown, New Features, and Changes

 

Difference between Angular 2,3,4,5,6,7,8— Breakdown, New Features, and Changes

Angular is one of the most  solutions for SPA (single-page application).The first version of the framework "AngularJS" in 2009 developed by google.Angular development besides React and Vue.js.It is an open source software engineering framework used for building single page application.ALso user it to crate animated memus for html web pages.AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google.AngularJS is the frontend part of the MEAN stack, consisting of Express.js web application server framework, Angular.js itself,MongoDB database,  and Node.js server runtime environment.
AngularJS is the version 1.0 and then google developed only angular version 2.0 omit "JS" in 14 September 2016.Which is Written in "TypeScript",Web platform Platform License by MIT.More details you can see https://angular.io/. The angaular version 1.0 and 2.0 is totally different.Angular 2.0 was announced at the ng-Europe conference 22–23. October 2014.The drastic changes in the 2.0 version created considerable controversy among developers. 

Angular JS 1.x

⦁    Referred to as “Angular.js” or Angular 1.x
⦁    JavaScript-based open-source front-end web application framework.
⦁    Developed and maintained by Google .Community of corporations  and individuals to address challenges encountered in developing single-page applications.
⦁    Main aims to simplify both the development and the testing applications.
⦁    It was initially released in Oct 2010
⦁    Angular development code is written in JavaScript

Angular 2

Angular 2.0 was announced at the ng-Europe conference.October 2014.Angular 2 is a complete rewrite or drastic changes in the 2.0 version created considerable controversy among developers.It is written entirely in TypeScript.Angular 1.x was not support mobile or not build in mobile but Angular 2 is mobile oriented.
⦁    Released in 2016
⦁    Complete rewrite of Angular 1
⦁    Written entirely in typescript
⦁    Component-based instead of Controller
⦁    ES6 and typescript supported
⦁    More testable as component-based
⦁    Support for Mobile/Low-end devices
⦁    Up to typescript 1.8 is supported

Angular 3

Angular 3 was skipped because mismatch between @angular/core, @angular/compiler and @angular/router libraries.And release angular version 4.0.0.

Angular 4

Angular 4 was announced On 13 December 2016 and  final version was released on March 23, 2017.Version 4.0.0 is backward compatible with Angular 2.

Features in version 4

⦁    Angular 4 is not a complete rewrite of Angular 2
⦁    No need to write a pattern for email validation in Angular 4.
⦁    TypeScript 2.1 and 2.2 compatibility: Finally We can use typescript 2.1 or more earlier only upto typescript 1.8 was supported.
⦁    Introducing HttpClient and HTTP Requests.
⦁    Conditionally disable animations.
⦁    Router life cycle events for Guards and Re-solvers
⦁    Released in 2017
⦁    Changes in core library
⦁    Angular 4 is simply the next version of angular 2, the underlying concept is the same & is an inheritance from Angular 2
⦁    Lot of performance improvement is made to reduce size of AOT compiler generated code
⦁    Typescript 2.1 & 2.2 compatible — all feature of ts 2.1 & 2.2 are supported in Angular 4 application
⦁    Animation features are separated from @angular/core to @angular/animation
⦁    — don’t import @animation packages into the application to reduce bundle size and it gives the performance improvement.
⦁    Else block in *ngIf introduced:
⦁    — Instead of writing 2 ngIf for else , simply add below code in component template:
⦁    *ngIf=”yourCondition; else myFalsyTemplate”
⦁    “<ng-template #myFalsyTemplate>Else Html</ng-template>”

Angular Version 5

Angular 5 was released on November 1, 2017. Builds created with the Angular CLI will now apply.Angular 5 Support for progressive web apps, a build optimizer and improvements related to Material Design.Angular Forms adds updateOn Blur / Submit.New Router Lifecycle Events : GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.HttpClient : @angular/http is deprecated in Angular 5. It is replaced with @angular/common/http library.

Some features are available in angular version 5
⦁    Build optimizer
⦁    Angular Universal State Transfer API and DOM Support
⦁    Compiler Improvements
⦁    Preserve White space
⦁    Increased the standardization across all browsers
⦁    HttpClient: until Angualar 4.3 @angular/HTTP was been used which is now depreciated and in Angular 5 a new module called HttpClientModule is introduced which comes under @angular/common/http package.
⦁    Angular 5 supports TypeScript 2.3 version.
⦁    Improved in faster Compiler support
⦁    Few new Router Life-cycle Events being added in Angular 5: In Angular 5 few new life cycle events being added to the router and those are:
 
ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd. 

Angular 6

Angular 6 is released with Angular CLI 6 and Material 6 on  May 4, 2018.The main cocused to release on the underlying framework and more on the toolchain.Angular 6 making it easier and performance improvement. 

Some Important Features of Angular 6 

⦁     ng update, ng add, Angular Elements,CDK Components, Angular Material Starter Components, CLI Workspaces
⦁    Library Support, Tree Shakable Providers
⦁    Animations Performance Improvements, and RxJS 
⦁    Ivy Renderer,Bazel Compiler,Closure Compiler,Component Dev Kit (CDK)
⦁    Typescript 2.7.x support
⦁    Added Forms Features
⦁    Router: Added navigationSource and restoredState to NavigationStart event.
⦁    Optional generic type for ElementRef 

Version 7

Angular 7 was released on October 18, 2018.The Angular JS 7 version is main focused on the Ivy project.The Ivy project is rewriting the Angular compiler and runtime code.

Some new features in angular 7
CLI Prompts:                                          

               Updated CLI prompts   v7.0.2 to with new features.like, ng-new,  ng-add  and @angular/material to help them discover the in-built SCSS support, routing, and more.it's customizable! Add a schematic.json using the Schematic CLI.Supports custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8).

Angular material & component dev kit (CDK):

              Angular version 7 is support ScrollingModule and DragDropModule.dynamically loading data such as images or long lists to support mobile frameworks by adding the ScrollingModule to allow for virtual scrolling.Drag and drop are  support including reordering lists and transferring items between lists. Also support rendering, drag handlers, drop handlers and even the ability to transfer data and also includes automatic rendering as the users relocates items.

ScrollingModule Example in html

<div class="scrolling-body-list" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
    <div *ngIf="!loading">
        <div class="row">
            <div class="col-sm-3" *ngFor="let item of scrollingDemoList">
                <div class="scrolling-list">
                    <span class="glyphicon glyphicon-off logo-small"></span>
                    <h4 class="sub-category-title">{{item.scrollingName}}</h4>
                    <div class="company-title">{{item.scrollingAddress}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
            </div>         </div>     </div> </div>

ScrollingModule Example in Controller(TS)
//This is your Function
//Define: this.page,this.loading and this.scrollingDemoList[] proparties before create the function.
  scollingExampleList(page) {
    this.page = page;
    this.loading = true;
      this.scrollingDemoList = [];
    this._scrollingService.getscrollingDemoList(this.page)
      .subscribe((res) => {
        if (res != undefined) {
          res.data.forEach(item => {
            this.scrollingDemoList.push(item);
          });
        }
        this.total = res.total
        this.loading = false;
      }, error => {
        console.log(error);
        this.loading = false;
      });
  }
   onScroll() {
       //define page,add increase pagesize by 1 like this
       this.page = this.page + 1;
//create scollingExampleList and then call here                                                        
     this.scollingExampleList(this.page);   }

Application performance Improvements

                         The Google development team have always focused on the performance so Angular Version 7 is make faster compare to previous version.Angular 7 also dedicated to making your apps as small as possible not only dedicated to making the framework as small as possible.By default, you get warnings when you reach 2MB and errors at 5MB. if you  need a little more space, just jump in your angular.json and adjust as necessary.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]
No Ivy:
                  The Ivy is in the pipeline; however, they haven’t disclosed its final timeline.The backward compatibility validation has begun,official blog post also mentioned.The Ivy can be released in a minor release as long as it's fully tested and validated.

Updated Dependencies
        Regarding to Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8)Dependency updates.

Upgrading requirements
                 It is very easy to upgrading process.You only need to run a single command stated given below to updgrade to your angular version 7. 
 
 $ ng update @angular/cli @angular/core 

If you use Angular Material,user this single line command.

$ ng update @angular/material 

Version 8

      This version was released on May 28, 2019.Updates Application Performance,irtual Scrolling, Improved Accessibility of Selects,Angular Material & CDK.Now supports Content Projection using web standard for custom elements.Also faster and easier to use it.

Most Iprominent features of Angular 8 are given below:
 Support TypeScript 3.4

 Supports Web Workers
 Preview of Ivy available
 Lazy loading
 Improvement of ngUpgrade
 Opt-In usage sharing

Loading of modern JavaScript,support TypeScript 3.4

              Angular 8 apps will now be automagically more performant.Angular 8 supports typscript 3.4.Optimized bundles for modern browsers and legacy bundles for older browsers.To ensure that the browser loads the right set of bundles also To automate the process by facilitating an CLI extension. 

Improved web worker bundling

                   They are are essential for improving  parallelizability and the speed of our application.They do it by writing code off the main thread.Web workers can also be helpful, if your application is unresponsive while processing data. 

Preview of Ivy and Bazel available
                                               When  Angular 8 release,a preview version of Ivy is now available for testing. Ivy is rendering engine that produces small bundle size and Bazel is the new build system.IVY has been grabbing attention of many people since its announcement in Google I/O 2018.
How to use vy in your project?,Instruct the Angular CLI to enable Ivy --enable-ivy switch: 

Two main concepts of IVY

Tree shakable
           it results in faster run time and smaller bundle because remove the unused code.
Local
        Recompile only the components that are changing.

Advantages of Angular 8.0 IVY

⦁    Enhanced payload size
⦁    Smaller builds
⦁    Shipment of pre-compiled code
⦁    Improved backwards compatibility
⦁    Quick re-build time
⦁    No requirement of metadata.json
⦁    Advent of meta programming in Angular
 

$ ng new angular-project --enable-ivy  

Advantages of Bazel are:

⦁    The incremental build and tests.

⦁    It provides a chance to make your backends and frontends with a same tool.

⦁    It has a possibility to have remote builds and cache on the build farm.
⦁    Dynamic imports for lazy-loaded modules

Lazy Loading

                you can use standard dynamic import syntax instead of a custom string for lazy-loaded modules given below.

{ path: '/employee', loadChildren: './employee/employee.module#EmployeeModule' } 

Will be looked like this:

{ path: '/employee', loadChildren: () => import('./employee/employee.module').then(s => s.EmployeeModule) } 

Version 9.0 

    Angular 9 is the smaller, faster, and easier to use in your application.The fully version of Angular 9 released month of October/November 2019.The main problem of previous versions, Angular is the large size of the final bundle which impacts the download time and as an output a result the overall performance of the application. 

Angular 9 Add Features given below

⦁    classes migration schematic in the core.
⦁     support ts_library targets as entry-points for ng_package [bazel].
⦁    core: add dynamic queries schematic and Mark TestBed.get as deprecated.
⦁    The formControlName also accepts a number in the form
⦁    language-service: enable logging on TypeScriptHost.
⦁     language-service: provide diagnostics for invalid styleUrls.
⦁     language-service: provide diagnostic for invalid templateUrls.
⦁    Support for TypeScript Diagnostics Format.
⦁    Support for Internationalization in Angular Ivy.
⦁    Support for more scopes in providedIn
⦁    A New Type-Safe TestBed.inject() Method Instead of TestBed.get()

Angular 9.0 performance Improvements

 ⦁    Avoid megamorphic reads during property binding.

⦁    Avoid repeated lview reads in pipe instructions.
⦁    Avoid repeated LView reads in property instructions.
⦁    Avoid unnecessary DOM reads in styling instructions.
⦁    limit TNode.outputs reads for the ivy.
⦁    Get name directly from nativeNode
⦁    Handle empty bindings in template type checker
⦁    In ngcc, handle inline exports in commonjs code
⦁     The ngcc should only index .d.ts exports within the package
⦁    The ngTemplateOutlet error when switching between null and template value
 

 

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response