What is coming with Angular 6

Benjamin Cabanes
4 min readApr 28, 2018

--

NgConf is THE Angular conference that rule them all and happened some days ago. A lot of new things for Angular have been announced. This article sums up all the goodness from the Angular team, be sure to check resources link if you want to see additional content like the slides and the video!

Announcing Angular LTS

Ng-conf @Brad Green Keynote 2018 — Public

First, the Angular Team will support in long term each of the releases. That means that each major version of Angular will be supported for 12 months at least. During these months, the team will release patches and fixes to the current version. That will give you the time to catch up, and upgrade you application at your own pace.

Aligning library releases

Ng-conf @Brad Green Keynote 2018 — Public

The multiple Angular packages and the main Angular projects maintained by the Angular Team will have aligned library releases. This will mentally ease the link with all the multiple dependencies you have in your project.

New CLI features

A lot of feature of Angular 6 will help you improve the experience using the Angular CLI, making it easier and faster.

Extending the CLI with Schematics

The first one concerns extending the CLI with Schematics. Schematics exists to automate some redundant tasks that you need to do when you’r developing with Angular. Schematics are currently used 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.

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.

Ng-conf @Brad Green Keynote 2018 — Public

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

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 adds test infrastructure and a build system too.

Angular Elements

Ng-conf @Brad Green Keynote 2018 — Public

Angular Elements will be supported. Angular Elements will allow you to publish Angular Components as Custom DOM Elements, which then can be used in any HTML page, in any other web framework. The author of the Angular Component will wrap the component with some custom code provided by Angular Elements and it will be ready to use by anyone, once published.

Tree shakable providers

Ng-conf @Brad Green Keynote 2018 — Public

Tree shakable providers will allow to lighten again the bundles size of your application. This will allow you to use a new api which will tree shake away the providers that are not needed. This means that the initial bundle, that the users load, will no require to pull out all the providers that your application needs.

What’s coming next?

With all the goodness released by v6, other new features and improvements are in the way. Let see what is coming!

New Angular Renderer “Ivy”

Ng-conf @Brad Green Keynote 2018 — Public

Ivy is the next generation Angular Rendering pipeline.

  • it focuses on improving the user experience by downloading less to the browser, which makes the apps startup faster;
  • it helps developers by simplifying the API, and the build system;
  • it helps the community by making the compilation pipeline more approachable which opens the possibility for third party contributions;
  • it is backward compatible, no change is needed to use it. Just a package.json update will be needed.

You can track the progress of the Ivy Renderer with ivy.angular.io and know more of the Ivy design here.

Resources

If you want all the raw details about the new feature, changes, fix and improvements, check the change log here.

See the original Angular Keynote

See keynote slides

--

--

Benjamin Cabanes

Javascript Architect @nrwl | @NXdevtools core team | 🇨🇦