The speculations are over. The new buzz in the digital town is about the release of Google’s new JavaScript Framework Angular 6. As expected, it is advanced to its predecessor, Angular 5, and released with great features like Angular Elements, new Schematics, Angular CLI 6, PWA and Material 6. Angular v6 is the first release of Angular that combines the Framework, CLI, and Material.

Angular 6 has given more emphasis on the toolchain instead of the underlying framework, which indeed makes it easier to move quickly with Angular in the future.

As a Google JavaScript framework for app development, the Angular v6 release is truly standing to its expectations.

Furthermore, if you are ahead with the framework packages, the Angular Material including CDK and the Angular CLI, the key versions are getting synchronized.

Check out the latest features of Angular 6:

TypeScript 2.7

Angular 6 now depends on TypeScript 2.7.

TypeScript, the programming language that brings optional static types to JavaScript by building on JavaScript itself. And it releases clean, readable and agnostic JavaScript that runs bleeding-edge ECMAScript features on any browser. With the support for 2.7, now it will be much easier to work with conditional type declarations, default declarations and strict class initialization.

Tree Shakeable Providers

Angular 6 now depends on RxJS 6.

RxJS 6 has new and simpler import paths and switch the chainable operators into pipeable operators. This makes the library a tree-shakeable one and will result in smaller bundles. Tree shaking is nothing but a built-in optimization feature which ensures that you’re your final bundle is not wrapped up with the unused codes. rxjs-compat is a new package installed alongside RxJS 6 to provide a compatibility layer while upgrading your code to the new syntax.

In Angular v6 modules referencing services moved to services referencing modules to make your applications smaller. This allows only to bundle services into your code base in modules where they are injected.

New Rendering Engine: Ivy

Ivy is the next generation of the Angular renderer and this will be the third rendering engine Angular has seen. The second was between version 2 and 4, called the View Engine.

A rewrite of the renderer, code-named Ivy, make the size of the app smaller and the compilation faster. The size of the Hello World app should be significantly smaller, that is only 3KB gzipped, which will allow for a smaller final app’s bundle size.

A stable version is not available yet, but it will be available as an opt-in replacement when the API is complete and stable.

ng update & ng add

The Angular CLI gets two major new commands: update and add.

With ng update, updating an Angular app is now just a command away. ng update is the most exciting command in your package.json file to automatically update your angular dependencies.

ng update will try and catch bugs and also update your code for you along with taking advantages of new APIs. Not only ng update helps you adopt the right version of dependencies, and keep your dependencies in sync, but also allows update scripts of 3rd parties using schematics. Hooking into the new command, schematics to make it easy to update those libraries as well.

Similarly, the new ng add command allows to add and configure new libraries into a project with a simple command. With ng add, 3rd-party libraries can create their own schematics for it.

Schematics

Using the technology called Schematics Angular CLI generates Angular artifacts. Schematics is a workflow tool that revolutionizes your app by creating a new component or updating your code to fix breaking changes in a dependency or add a new configuration option or framework to an existing project. Suppose if you want to create your own templates and have Angular CLI use it, Schematics will help you with this. With Schematics, you’ll be able to create your own code transformations like ng update.

Stable Angular Material with Component Dev Kit (CDK)

The biggest addition of Angular v6 is the new tree component for displaying hierarchical data. Many Angular Material2 components are built on top CDK Toolkit which is the Design agnostic toolkit offering 30+ UI components. CDK allows you to build your own library of UI components and control page layouts without using Angular Material. It also supports Responsive Web Design layouts eliminating the need for using libraries like Flex Layout or learning CSS Grid.

Developers can use this toolkit to build their own components with less effort as this toolkit holds most of the commonly used utilities to build components. The angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today. With the release of v6, this package now includes new positioning logic which helps in making pop-ups that intelligently remain on-screen in all situations.