The new JavaScript Framework Angular 6 of Google is now a reality. In November 2017, when they released Angular 6, the previous version, it was not clear when the new version will come and a lot of speculations were there. Now, it is important to know in detail about the significant changes in Angular 6 which make it a new version of Angular 5. The net outcome of the release of Angular 6 is that here is a new version which will facilitate making clear cross-compatibility.
Availability of the small and patch releases will be based on the project requirements. In Angular 6 version, the tool-chain is predominant and not the Framework which is underlying. Hence the users of the new version find it faster and also Angular 6 is easier to use. Another notable aspect is that once the user starts to proceed further with the different framework packages such as @angular/common, @angular/core, @angular/compiler and so on, the CDK and other Angular Materials and the Angular CLI, he realizes that there is synchronization of the key versions.
Access to RxJS v6
The release of Angular 6 enables the developers to access RxJSv6 provided they update their application. The inclusion of RxJS – the backward compatibility package is to enable the users to run the applications 100% hassle-free. The v6 was actually released weeks before with many important changes.
RxJS now provides a new method to import things. Here is an example:
In the previous version, the method to import things was –
import {Observable} from ‘rxjs/Observable’;import {of} from ‘rxjs/observable/of’;import {map} from ‘rxjs/operators’;const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n) );
Now, let us go through the method provided by the new version:
import {Observable, of} from ‘rxjs’;import {map} from ‘rxjs/operators’;const squares$: Observable<number> = of(1, 2).pipe(import {Observable} from ‘rxjs/Observable’;import { of } from ‘rxjs/observable/of’;import { map } from ‘rxjs/operators’;const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n) );
It was RxJS5.5 which introduced the pipeable operators. In order to upgrade to Angular 6.0, one must go through the entire documents created by the Angular team. Angular 6 has introduced a set of four new rules for tslint which is known as the
Angular Material & CDK Components
One of the most outstanding features of Angular 6 version is the new tree component. It can be used to showcase hierarchical data. The Angular Material and other core tree directives and also the CDK houses will be following the patterns provided by the data-table component so as to provide a similar experience, especially with the Material Design styles.
Besides the bottom-sheet components, new badges are also released. The badges may be used to extract vital information from unread items. The components of the bottom-sheet will signify the dialogs bottom of viewpoint which are mobile-centric and represent the options followed by action.
As far as CDK is considered, now @angular/cdk/overlay package is indeed one among the most attractive infrastructures.
NG Update
The new CLI command is in fact the ng update <package>. This new command enables users to update their project requirements according to the latest version. It will include the core packages as well as the dev Dependencies. The dependencies such as zone.js, rxjs and the typescript also will be automatically updated during its recursive action.
The scripts are also updated using schematics. In case one of the dependencies offers the ng update, the codes tend to be updated automatically when changes are required.
It is to be understood that schematic is a package of tasks like developing the codes and updating the code. These tasks are for the developers. One can get the classic Angular CLI tasks in @schematics/angular package. There are other new features also like the @schematics/package-update.
Schematics offer the following 4 main tasks –
- @angular/cli for updating CLI
- @angular-devkit for updating the DevKit
- @angular for updating Angular packages
- all for updating an entirely immediate update
Those who want to update the Angular packages only and not the CLI version are required to install the schematic first.
yarn add –dev @schematics/package-update
Then add a schematics script in your package.json
“scripts”: {“ng”: “ng”,”schematics”: “schematics”// … }As the next step they may run the command yarn schematics @schematics/package-update:@angular which will finally update the Angular packages.In the coming months more libraries as well as packages in the ng update Schematics can be expected from the Angular team. Apart from that the enterprise library component team will make use of the ng update for bringing out the changes so that the developers can save time.
NG ADD
The ng add <package> is another CLI command which enables easy addition of new possibilities to a project. With the help of a package manager it will download new dependencies, implement the schematics or installation scripts in the project so as to configure the changes and also add more dependencies like polyfills or package specific scaffold initializing code. Here are a few examples of new ng application:
The ng add @angular/pwa allows the applications to get converted to PWA after adding app manifest and service worker
The use of ng add @angular/material helps in installation and setting up of Angular Material including the themeing. You also can register a new starter component in ng generate
The ng add @ng-bootstrap/schematics lets you add the ng-bootstrap into your application
The ng add @clr/[email protected] is used for installing and setting up Clarity from VMWare.
In ng add @angular/elements, you are required to add the document-register-element.js polyfill and dependencies for Angular Elements
Elements
The first Angular elements were launched to bootstrap the Angular components with the Angular application that already exists. Registering them as Custom Elements is the only task for the users.
The elements are of great use in angular.io as content management system. The developers will be able to bootstrap through embedded HTML. They need not bootstrap components manually.
Tree-Shakeable Providers
While importing or exporting the modules in JavaScript Framework some of the codes may remain unused by the developers. In JavaSceipt Framework, this is called dead code elimination or tree-shaking. The modules which are not used will not be included in the bundle and the very purpose of the new method is to improve tree-shaking in the application. Now, one has to register directly with the @Injectable () decorator using the new ProvidedIn attribute. Either the root or another module of the application will be acceptable. When the root is used the injectable is registered as a singleton to the application. When ProvidedIn is used, the injectable will be registered as the provider of User Module which is not added to the provider of the module.
@Injectable {providedIn: ‘root’} export class UserService {} This is recommended for library developers as well as app developers who will be registering an injectable. An Injection Token also will be registered directly with the ProvidedIn. export const baseUrl = new InjectionToken<string> (‘baseUrl’, {providedIn: ‘root’, factory: () => ‘http: //localhost:8080/’})This will make unit testing easier.The UserService will be using ‘root’: before Each (() => TestBed.configureTestingModule ({}));
Angular Material Starter Components
By running the ng add @angular/material command, material can be added to the application which already exists. The users will now have three new starter components which are Material Sidenav, Material Dashboard and Material Data Table. A starter component with a toolbar with name of the app and side navigation will be provided in the first case. Responsive component depends on Breakpoints. Here is an example:
Option.1
By running the command ng generate @angular/material: material-nav –name=my-nav, material-nav will be provided as starter component.
Option. 2.
A starter dashboard component comprising of vibrant grid list of cards can be created. For example, ng generate @angular/material:material-dashboard –name=my-dashboard will generate material – dashboard.
Option.3.
Starter data table component, which has pre-configured datasource used in pagination and sorting can be created.
The starter component material-table will be provided by command ng generate @angular/material:material-table –name=my-table.
Changes in Animations
Since the implementation of animations is updated, the web animations polyfill is not required anymore. When one is using the Animation Builder the Polyfill need not be eliminated.As a result of removal of Polyfill from the application, about 47KB of bundle size can be saved. This will also ensure improved animation performance in Safari. Angular 6 will go back to CSS frames in case the browser is not supporting the element.Animate API.
Support for Library Development
provides support for creation and development of libraries. This is an exciting feature of CLI. Here is the command: ng generate library <name>A library can be built within the CLI workspace using this command and subsequently the user can go for further testing and configuration.
CLI Workspaces:
Angular 6 provides a lot of assistance for Workspaces where there are many projects including libraries and applications. For project configuration and creation one has to switch over to angular.json from angular-cli.json. The workspace has projects that contain targets. The targets may contain configurations.
Ivy Updates
The new concept of Ivy was introduced by the Angular team through the ng-conf. This is a latest development and is still under development. Hence it is not yet released. The preview version is shortly expected.
LTS (Long Term Support):-
The earlier announcement by the Angular team was that the long support line will be only for v4 and v6 so as to simplify the process of updating a process to another process. Also more time was offered for complicated projects for better planning.But, according to the latest announcement, beginning from v4, all major releases will get the support.
3 simple steps to upgrade to Angular 6.0
Those who want to upgrade their Java Script Framework to the 6.0 version may follow the steps given below. For more guidelines you may visit the official website.
Step.1
The first step is updating @angular/cli
Step.2
Next, upgrade the other framework packages Update other dependencies
Conclusion
The Angular team has successfully launched the version 6.0 with significant improvements and very interesting new features. As Angular6 is available already, web as well as app developers may ensure to get updated about this latest version of JavaScript Framework. But, the developers have to wait for Ivy since it is yet to be released. The users can maximize its benefits for the creation of extraordinary applications which will grab the attention of target audiences.
