Skip to main content

Angular 6 vs Angular 5 vs Angular 4 – What's New in Angular 6?

Explore for All - Angular 9 vs. Angular 8 vs. Angular 7 vs. Angular 6, 5, 4, 2

What's New In Angular 6? and What Are the Improvements In Angular 6?
Off-course! Angular 6 being smaller, faster and easier to use and it will make developers life easier. Recently Angular 6.0.2 released.

The Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and may more things.

Let’s start to explore all changes of Angular 6 step by step!

Added ng update - This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.

ng update

Angular 6 uses RxJS 6 - this is the third-party library (RxJS) and introduces two important changes as compared to RxJS 5.
1.      RxJS 6 introduces a new internal package structure
2.      Operator concept

Both are requires you to update your existing code

To update to RxJS 6, you simply run -
npm install --save rxjs@6

Simply run the blow command and update your existing Angular project-
npm install --save rxjs-compat

Alternatively, you can use the command - ng update rxjs to update RxJS and install the rxjs-compat package automatically.

RxJS 6 Related import paths -

Instead of -
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

Use a single import -
import { Observable, Subject } from 'rxjs';

So all from rxjs/Something imports become from one 'rxjs'

Operator imports have to change -

Instead of
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/throttle';

Now you can use -
import { map, throttle } from 'rxjs/operators';

And

Instead of
import 'rxjs/add/observable/of';

Now you can use -
import { of } from 'rxjs';

RxJS 6 Changes - Changed Operator Usage

Instead of-
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/throttle';
yourObservable.map(data => data * 2)
.throttle(...)
.subscribe(...);

You can use the new pipe () method,
import { map, throttle } from 'rxjs/operators';
yourObservable
  .pipe(map(data => data * 2), throttle(...))
  .subscribe(...);

CLI update and added a new project config file - Instead of “.angular-cli.json” using “angular.json”
Now in Angular 6 new projects use an “angular.json” file instead of “.angular-cli.json” file.

ng update @angular/cli --from=1 --migrate-only
The above command helps you to update your existing “.angular-cli.json” file to the new “angular.json” file.

The “angular.json” file contains the Properties -
1.      Version - This is integer file format version and it is currently 1.
2.      newProjectRoot - This is string path where new projects will be created.
3.      defaultProject - This is default project name used in commands.
4.      CLI - This is workspace configuration options for Angular CLI and it contains
a.      defaultCollection
b.      packageManager
c.       warnings
d.      And so on.
5.      Schematics - This is configuration options for Schematics.
6.      Projects - This is configuration options for each project in the workspace and it contains
a.      root
b.      sourceRoot
c.       projectType
d.      prefix
e.      schematics
f.        Architect - This is the project configuration for Architect targets.

The <template> deprecated, Now Angular 6 introduce <ng-template>
Now in Angular 6, you should use <ng-template> instead of <template>

For example, previously you are using
<template [ngIf]="IsAdmin">
  <p>This template renders only if IsAdmin is true.</p>
</template>

Now in Angular 6, you should use <ng-template> instead of <template>
<ng-template [ngIf]="IsAdmin">
  <p>This template renders only if IsAdmin is true.</p>
</ng-template>

Service level changes (the way of marking a service as global) -
In the earlier versions, if you want to provide a service to the entire application –you should add it to providers [] in the AppModule but in the Angular 6 released you should not add in the providers [] in the AppModule.

Example for marking a service as global -

Instead of
//my.service.ts
export class MyService { }
//In app.module.ts
//JavaScript imports services
import { MyService } from './my-serice.service';
//AppModule class with the @NgModule decorator
@NgModule({
  declarations: [],
  providers: [MyService] //My services instances are now available across the entire app.
})
export class AppModule {
   //exporting app module
}

Use with Angular 6 released-
//my.service.ts
@Injectable({providedIn: 'root'})
export class MyService { }
@NgModule({
  declarations: [],
  providers: [] // Service does not need to be added here
})
export class AppModule {}

The second one obviously saves you some lines of code as compare to previous code.

Angular 6 introduces Angular Elements -
The elements are a feature that allows you to compile Angular components to native web components which you can use in your Angular application.

An angular element is a package which is part of the Angular framework @angular/elements.

 For more detail kindly refer the Angular Elements

Angular 6 introduces new Ivy Renderer -
The new Ivy renders and it’s not stable for now and it’s only in beta version. It will stable in future for production.


Ivy Renderer is new rendering engine which is designed to be backward compatible with existing render and focused to improve the speed of rendering and it optimizes the size of the final package. 

The main goal of Ivy render is to speed up its loading time and reduce the bundle size of your applications. Also for uses a different approach for rendering Angular components.

For Angular, this will not be default renderer, but you can manually enable it in compiler options. 


Bazel Compiler -
The Bazel Complier is a build system used for nearly all software built at Google.

From Angular 6 release, will start having the Bazel compiler support and when you compile the code with Bazel Compiler, you will recompile entire code base, but it compiles only with necessary code.

The Bazel Complier uses advanced local and distributed caching, optimized dependency analysis and parallel execution.


 For more detail kindly refer the Angular 6

Replace Context, Record and Injectors -
Replace ngOutletContext with ngTemplateOutletContext
Replace CollectionChangeRecord with IterableChangeRecord
Now use Renderer2, Instead of Renderer
Now use StaticInjector, Instead of ReflectiveInjector,

Angular 6 Renamed Operators -
The lists of renamed operators are –
1.      do() => tap()
2.      catch() => catchError()
3.      finally() => finalize()
4.      switch() => switchAll()
5.      throw() => throwError()
6.      fromPromise() => from()

Angular 6 introduces multiple validators for array method of FormBuilder
import { Component } from '@angular/core';
import {FormsModule, FormBuilder, FormGroup} from '@angular/forms';
constructor(private fb: FormBuilder) {}
myForm: FormGroup;
ngOnInit() {
  this.myForm = this.fb.group({
      text: ['', Validators.required],
      options: this.fb.array([], [MyValidators.minCount, MyValidators.maxCount])
  });
}


Addition of navigationSource and restoredState to NavigationStart -

These two properties help us to handle multiple use cases in routing.

NgModelChange Now emitted after value and validity is updated on its control. Previously, it was emitted before updated.

As the updated value of the control is available, the handler will become more powerful

Previously  -
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">

And
onChange(value) {
  console.log(value);   // would log the updated value, not old value
}
Now Use -
<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

And
onChange(NgModel: NgModel) {
  console.log(NgModel.value);// would log old value, not updated value
}

Form Control statusChanges – Angular 6 emits an event of “PENDING” when we call Abstract Control markAsPending.

New optional generic type ElementRef – This optional generic type will help to get hold of the native element of given custom Element as ElementRef Type


Let’s see in depths-

1) Typescript 2.7+ supports
2) Added Angular Material and CDK Stable
3) Component Dev Kit (CDK) - CDK allows you to build your own library of UI components using Angular Material.

4) Improved decorator error messages
5) Fix platform-detection example for Universal
6) Ivy Renderer - It is a new backward compatible and main focused area - speed improvements, size reduction, and increased flexibility.

7) Add afterContentInit and afterContentChecked to render
8) Added to supports of nativeElement

9) Added Optional generic type for ElementRef
The Example looks like -
@ViewChild('your-element') yourElement:ElementRef;


10) Bazel Compiler - Bazel only rebuilds what is necessary.
11) Added Test Comment
12) Add missing lifecycle tests for projected components
13) Closure Compiler - Closure Compiler consistently generates smaller bundles.
14) Rename QueryPredicate to LQuery and LQuery to LQueries
15) Service Worker - Service worker is a script that runs in the web browser. It also manages caching for an application.

16) Added multiple validators for array method of FormBuilder

17) Handle string with and without line boundary - Now Handle string with and without line boundary (^ & $) on pattern validators. Previously, it works with string not boundaries.

18) AbstractControl statusChanges - Previous version, not emits an event when you called “markAsPending” but now emits an event of "PENDING" when we call AbstractControl markAsPending.

19) Updates on NgModelChange - Now emitted after value and validity is updated on its control. Previously, it was emitted before updated.
  
20) Allow HttpInterceptors to inject HttpClient
Previously, an interceptor attempting to inject HttpClient directly would receive a circular dependency error, as HttpClient was constructed via a factory which injected the interceptor instances. Users want to inject HttpClient into interceptors to make supporting.

Either HttpClient or the user has to deal specially with the circular Dependency. This change moves that responsibility into HttpClient itself. By utilizing a new class HttpInterceptingHandler which lazily Loads the set of interceptors at request time, it's possible to inject HttpClient directly into interceptors as construction of HttpClient no longer requires the interceptor chain to be constructed.

21) Add navigationSource and restoredState to NavigationStart – Currently, NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled differently for a variety of use cases (e.g., scroll position restoration). This PR adds a navigation source field and restored navigation id (passed to navigations triggered by a URL change).

22) Add type and hooks to directive def
23) Enable size tracking of a minimal CLI render3 application
24) Add canonical view query
25) Language Service – The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by '/' instead of being able to handle '\'.

Where to download the Angular 6 beta 


What's New In Angular 5? What Are the Improvements In Angular 5?
Angular 5 is going to be a much better angular and you will be able to take advantage of it much easier and it contains bunch of new features, performance improvements and lot of bug fixes and also some surprises to Angular lovers.

Angular 2 vs. Angular 1 Angular 4 vs. Angular 2 Angular 5 vs. Angular 4 Angular 6 vs Angular 5

Included Key Features - Angular 5
1)     Include Representation of Placeholders to xliff and xmb in the compiler
2)      Include an Options Arg to Abstract Controls in the forms controls
3)      Include add default updateOn values for groups and arrays to form controls
4)      Include updateOn blur option to form controls
5)      Include updateOn submit option to form controls
6)      Include an Events Tracking Activation of Individual Routes
7)      Include NgTemplateOutlet API as stable in the common controls
8)     Create StaticInjector which does not depend on Reflect polyfill
9)      Include [@.disabled] attribute to disable animation children in the animations
10)  Make AOT the default
11)  Watch mode
12)  Type checking in templates
13)  More flexible metadata
14)  Remove *.ngfactory.ts files
15)  Better error messages
16)  Smooth upgrades
17)  Tree-Shakeable components
18)  Hybrid Upgrade Application

Included Performance Improvements - Angular 5
1)     Use of addEventListener for the faster rendering and it is the core functionality.
2)     Update to new version of build-optimizer.
3)      Include some Improvements on the abstract class methods and interfaces
4)     Remove decorator DSL which depends on Reflect for Improve the Performance of Apps and This is the core functionality.
5)      Include an option to remove blank text nodes from compiled templates
6)     Switch Angular to use Static-Injector instead of Reflective-Injector.
7)     Improve the applications testing.
8)     Improve the performance of hybrid applications
9)     Improvements on Lazy loading for Angular

Improvement on HttpClient – Included
1)     Improvement on Type-checking the response
2)     Improvement on Reading the full response
3)     Improvement on Error handling and fetching error details
4)     Improvement on Intercepting all requests or responses
5)     Improvement on Logging
6)     Improvement on Caching
7)     Improvement on XSRF Protection

Angular Router Life Cycle Events -
Added new router life cycle events for Guards and Resolvers -
1)     GuardsCheckStart,
2)     GuardsCheckEnd,
3)     ResolveStart and
4)     ResolveEnd
 Angular 4 contains some additional Enhancement and Improvement. Consider the following enhancements.

1.    Smaller & Faster Apps
2.    View Engine Size Reduce
3.    Animation Package
4.    NgIf and ngFor Improvement
5.    Template
6.    NgIf with Else
7.    Use of AS keyword
8.    Pipes
9.    HTTP Request Simplified
10. Apps Testing Simplified
11. Introduce Meta Tags
12. Added some Forms Validators Attributes
13. Added Compare Select Options
14. Enhancement in Router
15. Added Optional Parameter
16. Improvement Internationalization
I hope you are enjoying with this post! Please share with you friends. Thank you so much!
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS