img

Angular 6: Migration & New Feature Summary

Angular 6, was just released with many of new features and many changes in terms of tooling. This new tooling comes with great facility to upgrading & adding new libraries. I will walk you through all new feature & upgrade guide how to move from Angular 6.

New Features & upgrades

Below you’ll find a summary of major new features & upgrades.

The Angular CLI

Angular get us two major command in this release: ng add & ng update

ng add

The new ng add command  allow us add an configure new libraries into project with simple single command. For example, to install and configure Angular Material require few steps to follow, but now it can all be done via single command:

$ ng add @angular/material

So basically, it add Angular Material in package.json and configure your project so you can directly use & run it in your project.

ng add will use your package manager to download required dependencies and will update configuration of your project with additional dependencies using installation script(thanks to schematics).

ng update

Same like ng add, the new ng update allow you to update 3rd party libraries to your Angular project.Many 3rd party libraries are hook up with this new command.again this also work with package manager to download needed dependencies and update package.json and update your project configuration to directly run.For example:

$ ng update @angular/core

This command update Angular project framework packages as well RxJS and Typescript and all available schematic to keep your project up to date.

Angular Elements

This feature is first time introduce with Angular 6.0 to allowing you to bootstrap Angular Elements with Angular application custom components. angular.io is using this for content management system to allow dynamic bootstrapping of capabilities via embedded HTML.

Angular Material + CDK Components

Angular 6 is release with

new tree component for displaying hierarchical data very first time. CDK contain bunch of services,directives,components,classes,modules and many more to make developers lives easy. As in first release they included feature of text directionality,dynamic component instantiation,accessibility,platform detection.To run below command:

$ ng add @angular/material

After adding Angular material into your project you can also able to generate 3 starter component like below.

Material Dashboard

To add Material Dashboard you can run:

$ ng generate @angular/material:material-dashboard --name=my-dashboard

Angular Material Dashboard

Material Sidenav

To add Material Sidebar you can run:

$ ng generate @angular/material:material-nav --name=my-navbar

Angular Material Navbar

Material Datatable

To add Material Datatable you can run:

$ ng generate @angular/material:material-table --name=my-datatable

Angular Material Datatable

Migration Guide

To upgrade you can visit https://update.angular.io for guidance and information.

Migration Guide

 

To update normally you have to follow 3 steps.

  1. Update @angular/cli
  2. Update your Angular framework packages
  3. Update other dependencies

If you face any difficulties while upgrading you can comment below.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

It is main inner container footer text