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 making developers
life easier. Recently Angular 6.0.0-beta.7 is released and production release on end of March 2018.
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.
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.
You can learn more about the new features in
detail
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.
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.
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])
});
}
Updates on NgModelChange -
Now emitted after value and validity is updated on its control. Previously, it
was emitted before updated.
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
}
Let’s see in depths -
1)
Typescript 2.6.x 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 - https://github.com/angular/angular/releases/tag/6.0.0-beta.1
