Angular 6: It is almost there…

Rahul Bhooteshwar
May 3, 2018 · 5 min read

If you are worried about the fact “one more upgrade! more backward compatibility issues, more problems and more effort!!”, so let me tell you it will not be like that. Most of the upgrade stuff should be smooth and it is worth upgrading to Angular 6.

Following are the key take aways from ng-conf-2018:

Long Term Support for Angular

Each major Angular version will be supported for atleast 12 months by Angular team. What is there for you? It means Angular team will release fixes/patches for the major version for 12 months and it will allow you to upgrade your application at your own pace.

Version Alignment for library releases

Currently Angular’s major libraries are not aligned with versioning strategy. From v6 those will be aligned with same version.

New Angular Renderer “Ivy”

Not sure, if this will be part of first release of Angular 6 but this is really awesome thing that is going to happen behind the scenes of Angular framework. It is going to change the whole way of rendering Angular application. Don’t worry you need not to change anything to leverage it with V6. The way of writing angular templates will be same but behind the scene it will be a completely different process that will take Angular’s performance to a new level. It will also reduce the build size to a great extent. It will be really a jackpot for next generation Angular apps.

Build size comparision with new renderer

Providers with tree shakable capabilities

Angular v6 will allow you to use a new API that will tree shake away the piece of code that is not required at the moment. That means, the initial bundle that user loads, will no require to pull out all the providers that your application needs. Ultimately further reducing the bundle size.

Angular Elements: The long awaited feature is on its way…

So, with Angular v6 you will be able to develop your components in Angular and bundle it within a single script, so that it can be used anywhere in any web application irrespective of the web technology.

Suppose you have developed an Angular component “World Clock widget”, that you want to include in a site that is using Adobe Experience Manager (AEM), or React or Vue or whatever!

You will be able to generate a bundle script for that component that you can include in your site and mention the component selector wherever required.

Isn’t it great? So now you will be able to use Angular in legacy projects that are not SPA but want to leverage features of Angular. It will also facilitate web transformation of legacy websites at your own pace.

Angular CLI Features

We all know that Angular CLI is a boon for the developers to automate some redundant tasks and generate code scafolding. It helped a lot to save project setup time and maintain code/directory structure consistency thoroughout the project.

Extending the CLI with Schematics

You might not be aware of Schematics, but you are already using it as a way to create, easily and fast, some type of files, like components, directives, pipes, services… but this is more than that. If you want to know more about schematics you can go check this out here.

With V6, New types of schematics will be available, that will be able to ease the integration of new libraries, add capabilities, and update your npm dependencies automatically (framework & libraries), update your code and libraries too (RxJS + Material) inside your current Angular project.

This will ease the upgrade process to future Angular version as it will automatically update the dependencies as well as your code wherever possible. It will also provide suggestions to change code as per the upgrade requirement.

Basically, using the new schematic ng add will looks like this:

> ng add @angular/pwa> ng add @angular/elements> ng add @angular/material> ng add @ng-bootstrap/schematics> ng add @clr/angular> ng add @nativescript/schematics

Generating library scaffolding

This was also a long awaited feature. If you want to build a component library which can be published (private or public) for reuse, it is really a headache as of now. A lot of setup and scafolding effort is required. The Angular CLI can now be used to generate your Angular Library. This is something that the community wanted for a long time, and is finally here. Generating the library’s project scaffolding with all the basic features you will need to directly start coding. It will add test infrastructure and a build system too.

So, that was it as of now. Hope this will excite you for the upcoming superheroic features in Angular framework. Stay tuned for the details of the features, as I will be coming up with some more articles about these new features in depth.

Keep Learning..Keep Sharing..

References

Learn With Rahul

A collaborative initiative of two people who not only have the same name but also have the same interest and passion towards technology and programming. We love to learn new things & use to share with each other. Many times we found ourselves debating & eventually understanding

Rahul Bhooteshwar

Written by

Programming enthusiast, Technical Blogger, learning the concepts of cutting-edge technologies in Software Development.

Learn With Rahul

A collaborative initiative of two people who not only have the same name but also have the same interest and passion towards technology and programming. We love to learn new things & use to share with each other. Many times we found ourselves debating & eventually understanding