Angular 6.0 Version, Features & Here Is How To Update - MobileAppDaily
How To

Angular 6.0 Version, Features And Here Is How To Update

The new version comes with small but helpful upgrades

https://dk2dyle8k4h9a.cloudfront.net/Angular 6.0 Version, Features And Here Is How To Update

Angular JS, the javascript based framework for front-end application development is making the work of the developers less hectic since 2010. In order to add more features and expand its abilities, the Angular 6.0.0 version has arrived now. The new version comes with many small and significant additions that every developer should know about. Below you will see the breakdown of the features comes with new Angular 6 for you to make you aware about what you will be getting with the latest update.

ng update

The ng update is a new addition to the Angular CLI, which makes updating the Angular JS a simple task. You are just a command away from updating the Angular. Besides, you can also update the available libraries with the use of this command. In order to carry out the process, the command works with the package.json file while using the package manager and also transforms the code wherever needed to update code or configuration file.

ng add

The ng add is another command addition to the Angular CLI that enables the users to configure and add new libraries. With this new feature, the addition of any new library can be done just with a single command. To install and set up the Angular Material you need to enter the below command instead of typing the lengthy code.

$ ng add @angular/material

Here are some set of commands you can use on the new application

  • ng add @angular/pwa?—?Turn your application into a PWA by adding an app manifest and service worker

  • ng add @ng-bootstrap/schematics?—?Add ng-bootstrap to your application

  • ng add @angular/material?—?Install and setup Angular Material and theming and register new starter components into ng generate

  • ng add @clr/angular?—?Install and setup Clarity from VMWare

  • ng add @angular/elements?—?Add the needed document-register-element.js polyfill and dependencies for Angular Elements.

Changes to CLI elements

The developers using the Angular CLI for their projects should give attention to this change. Earlier the projects based on CLI had the configuration file named angular-cli.json is now changed to angular.json along with the changed structure.

.ng new

The newly added command ng new under the CLI helps in creating a workspace with a default application easily. Moreover, additional apps can also be added to the workplace, allowing multiple apps to run under a single project. The libraries created using CLI can now also be added to a workplace as a 1st-class citizen.

$ ng g library ng-fancy-lib

Angular Element Changes

Angular 6 comes with the most awaited feature that every developer was seeking for a long time now. With the new update, it is possible to easily built components that can be added as a custom element under Angular Element. Besides, the components or the custom elements can be added to other projects and eventually to other java based frameworks.

You can add an element in Angular 6 using the below command

Ng add @angular/elements

Angular 6 is much more faster and easy to work with, it offers a new and comfortable way to import paths using the chainable operators. This new approach could convert the whole library into a smaller package. However, installing the rxjs-compat, a new package alongside the Angular 6 will result in a compatibility layer for the code to update to the new syntax.

Earlier

@NgModule({

...

providers: [MyService]

})

export class AppModule {}

Now

import { Injectable } from '@angular/core';

@Injectable()

export class MyService {

constructor() { }

}

Ivy Renderer

Renderer named Ivy Renderer in the framework helps the angular in increasing speed, reducing the size and carrying out more reliable process also getting something new. However, with Angular 6 it didn't get an upgrade, but the rumors and talks are going for it get a smaller size renderer soon. For now, there is no stable version of the Ivy renderer, but it will release soon once the API is complete and stable.

Upgrading Angular

In order to leverage all the new features and upgrade you need to install the latest upgrade to the Angular framework. The Angular team has prepared a complete guide for the users to upgrade the Angular to its 6 version easily. Moreover, you can go through the breakdown of all the steps to install the latest version mentioned below.

Updating CLI

First, you need to update the Angular CLI to version 6 using the below codes. The code will help you updating the Angular CLI to both locally and globally to the project.

# updating using npm

$ npm i -g @angular/cli

$ npm i @angular/cli

 

# using Yarn

$ yarn global add @angular/cli

$ yarn add @angular/cli

Run ng update

With the release of Angular 6, you can run ng update for CLI, Angular material, and Angular Core. Below are the different codes you need to use for the update.

The code will update the CLI and will change the configuration file format to angular.jason

$ ng update @angular/cli

Use the code to run the ng update for Angular core packages.

$ ng update @angular/core

Now, use this code to run the ng update for Angular Materials.

$ ng update @angular/material

Wrapping Up

Angular 6 may add some of the upgrades and features to the framework, but the changes aren't that significant. However, CLI update is an exciting upgrade from the Angular team that speeds up the process. According to the resources, the Angular team is working hard on major updates that it will be releasing them very soon. The team is now focusing on improving the performance and making the framework more stable.

Vikram Khajuria
Written By Vikram Khajuria

Jack of all trades. Covering the journalism field, Vikram writes at MobileAppDaily and keeps surfing the trends to understand tech and inventions better. Don’t forget his driving skills, he is a professional car rallyist. Life has just got better. Breathe it!!

Top Companies

InMobi
Singapore
Dot Com Infoway
New York, USA
M&C Saatchi Mobile
New York City, USA
Techmagnate
New Delhi, India
Fetch
London, UK
View full report

Latest Articles

Join our global community 135K Followers
How To

How to Use Sky Filters on Snapchat for More Engaging Snaps?

Ariana Johnson 4 min read  

Snapchat has come up with the new feature ‘Sky Changing Filter’ which is gathering users’ attention and spreading fun among them. This tool is able to transform a boring and simple snap into a stylish and interesting one. Some new set of sky filters are added to the app which has e

How To

How To Download iOS 12 Beta 6 And Everything You Need To Know

Vikram Khajuria 4 min read  

It is almost a year since Apple dropped iOS 11 and changed the whole landscape for the smartphone users. Now, iPhone and iPad users should prepare themselves for another event this falls when the tech giant will unveil iOS 12. There may be a month or two until we get to see the upcoming iOS version,

How To

How To Upgrade Your Android To 'Oreo' After Google Launched it Officially

James Lawson 4 min read  

Yesterday, Google officially announced the name of the updated version of the Android Platform. As obvious the ‘O’ stands for Oreo and the company also showcased the statue for representing the Android O. However, the company released latest version of the Android is only for the Pixel a

How To

How To Submit Your New App On The Apple App Store

Vikram Khajuria 7 min read  

The proudest moment for any developer is when he gets his first app registered on an app store. And if it's about the Apple App Store, the feeling of achievement increases multifold. So, why there is so much confusion in submitting an app on the Apple App Store.There are still many people ou