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

Managing Your Google Privacy Settings Was Never That Easy

Vikram Khajuria 4 min read  

At such a time when scams like Cambridge Analytic and data theft are making the headline, one needs to get updated about any possible trick that can save you from getting exploited. Each one of us does share some or the other kind of personal information on various online platforms. But is it safe e

How To

How To Disable Settings: Hide Recent & Suggested App in iOS 11 on iPad

Neha Baluni 4 min read  

There is no hint of doubt in the fact that Apple has taken iPad to a whole new level with iOS 11. The operating system has offered an array of services for the users among which the “Dock” and the “drag and drop” facility is one of the most prominent ones. The Dock allows use

How To

How To Watch Apple WWDC 2018 Keynote And All The Related Events

Vikram Khajuria 4 min read  

Event: Apple Worldwide Developers Conference (WWDC 2018)Place: McEnery Convention Center, San Jose, CADate: June 4–8, 2018Time: 10:00 am Pacific Time (Monday)Apple's developer conference of 2018, WWDC (Worldwide Developers Conference) is scheduled to be held in the next w

How To

How To Get Best Emojis On Your Android Smartphone

Neha Baluni 4 min read  

Let’s be honest with this, texting without emojis seems like you are playing a game that lacks aesthetics. And with best emojis, it is not only about the aesthetics but also about adding a natural flair to your texting that adds-on to the meaning you wish to import. Words are powerful and the