Angular started as a simple frontend library. Today it has transformed in a complete framework as simply ‘Angular’ with continuous version progression from 2 to the recent 6. This progression added some amazing features to Angular, making the overall development process easier.
Angular 6, is the latest version, is packed with exciting new features for all of the Angular community.
In this article we are going to cover some amazing features which are out with Angular 6.
So let’s get started!
Angular Elements
Consider a search component that we would like to have for a specific Angular application. It can be visualized as follows.
In above application the search component uses the input ‘bat’ to fetch the results on the basis of its text similarity. A class named `SearchComponent` must be working beneath the app.
With the advent of Angular 6, we can wrap such Angular components into custom elements. Such elements are nothing but DOM elements; in our case a combination of textbox and divs with a composition of javascript function.
These elements once segregated can be used independently irrespective of any other frontend libraries like react.js, view or simple jquery.
The custom elements are a new way to set the component individually out of the ng framework and use it independently.
Ivy: Support for new Angular engine version 6 onwards
Angular 6 will introduce us (in the near future) to a new Ivy engine that contributes to great performance and the decrease in load time of an application. Here are some important features of Ivy you need to know.
Shaking Tree
It is an optimization step that makes sure that unused code is not present in your build bundle.
The tree shaking compilation is often used while executing `ng build` command to generate the build. New to what is a build or a bundle? A build or a bundle is a ready-to-go-live set of files that needs to be deployed on the production environment. Let’s say a frontend project will be needing the following files in a bundle :
In your Angular project there might be a component included but is not required. Assume, it falls under a specific if-condition and is not at all executed. The normal dead code elimination tools using static analysis work by retaining the symbols/characters of the reference already present in the unbundled code. Hence the component that was conditionally not at all used, unfortunately remains inside the bundle.
The new rendering mechanism Render 2 is built to solve such issues. Now we can specify configuration through instruction based rendering technique. This may include only things that are required which in turn minimizes the size of builds bundles to the great extent.
The new Ivy engine seems cool!
New cli commands
With upgradation to Angular 6, the ng cli package provides two new commands.
ng add
As its name suggests, the ‘ng add’ command provides you the capability to add a new module/package to your current application. This may be rxjs, material UI libraries etc. Don’t get confused, it doesn’t install the package but simply adds one to your project whenever required. So if you are planning to add a third party library to your Angular app make sure you install it using npm, and then add it using ng add. The automatic addition of such modules helps reduce development time by avoiding errors while adding up a module.
ng update
The new Angular version 6 cli has the most awaited ‘ng update’ command. This command when run, yields a command line that provides a list of packages that need to be updated over time. In case they are already updated, the command just provides a confirmation that everything is in order.
Upgrading to ng 6
A fresh Angular 6 installation is not a problem. You can always follow https://update.Angular.io/ for incorporating changes with respect to updates.
Here are a few set of things to do if you are planning to upgrade in your current project.
- Node.js version 8.9+
- Update your Angular configuration
//Globally
npm i -g @Angular/cli
//locally
npm i @Angular/cli
- Once the Angular cli has its latest code, the ng update command is available for use. So let us use it for updating the packages under Angular/cli as follows
npm update @Angular/cli
- Update the Angular/core packages using ng update as follows
ng update @Angular/core
- Angular has rxjs for handling asynchronousity in the application. This library also needs to be updated to rxjs 6. Here is the link for the detailed updation process
- Update Angular material library that provides beautiful UI components
ng update @Angular/material
- Finally run `ng serve` and test the new setup
Besides all the amazing features listed above, Angular 6 provides support to rxJS6, Typescript 2.7 with conditional type declarations and not to forget the service-workers package in Angular’s core.
At the time of Angular 6 launch, there were small break points with respect to command line commands like ng updates which are fixed by now and stable. The Angular team is already working towards some more incredible features like new ng-compiler engine, @aiStore (an AI powered solutions store), @mine package for bitcoins and much more in Angular 7.
Over the years, the Angular team has continued to provide dedicated support to evolve the project into one of the best that technology has to offer. With such tenacity, looks like the whole Angular ecosystem is poised to scale even greater heights than before. I, for one, can’t wait to see what they do next in Angular!
[author title=”Author Bio”]
Erina is an assistant professor in the computer science department of Thakur college, Mumbai. Her enthusiasm in web technologies inspires her to contribute to freelance JavaScript projects, especially on Node.js. Her research topics were SDN and IoT, which according to her create amazing solutions for various web technologies when used together. Nowadays, she focuses on blockchain and enjoys fiddling with its concepts in JavaScript.[/author]
Read Next
Why switch to Angular for web development – Interview with Minko Gechev
ng-conf 2018 highlights, the popular angular conference
Getting started with Angular CLI and build your first Angular Component
