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

Angular 6.0 Version, Features And Here Is How To Update

The new version comes with small but helpful upgrades

How To published date 25th July, 2018 Akash Singh Chauhan

Angular 6.0 Version

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.

Akash Singh Chauhan

Akash Singh Chauhan

Akash Singh Chauhan is a senior writer at MobileAppDaily and he mainly covers all the latest happenings and tweaks in mobile app technology. Being an Engineering graduate he is always compelled to the technology and tries to discover new trends in the tech world. Along with any tech news he also never misses a single episode of ‘Dragon Ball’.

Was this article helpful?

Show Comments
0