NEW FEATURES OF ANGULAR 6

AngularJS has always been a boon to the web developers being faster, smaller and easier. Angular 6 continues to stay true to that theme and has a number of new features that will help developers get their jobs done better than before. Let’s check out some of these new features:

Bazel Compiler:

Bazel is used almost for all software built at Google, including their apps which are developed in Angular. It only rebuilds what is necessary. Since source code changes often, it is not necessary to rebuild the entire application for every little changes every time.Instead, only those code could be rebuild which actually changes, and code that depends on the changes. The builds occur faster due to advanced local and distributed caching, optimized dependency analysis and parallel execution. So we can assume that this would be the important feature of the incremental build to most of the AngularJS Development Company

Component Dev Kit (CDK):

The Angular Material library uses component dev kit, which provides more than 30+ UI components. CDK helps to build our own library of UI components using Angular Material. It also supports Responsive Web Design layouts eliminating the need for using libraries like Flex Layout or learning CSS Grid. 

Closure Compiler:

Closure Compiler is the bundling optimizer used to create JavaScript modules for almost all Google web applications. The Closure Compiler generates smaller bundles and works perfectly for dead code elimination compared to Webpack and Rollup bundlers. In the upcoming releases of the Angular framework, developers will be able to use toolchain for building apps as well. 

Angular Elements:

Angular is the best for developing Single-Page Applications and creating widgets. The Angular Elements package enables to create an Angular component and publish it as a Web Component, which can be used in any HTML page. The developers of this app will be able to use Web Components built in Angular in the pages of such an app. This kind of feature will help web developers to switch to the Angular framework for web application development. 

Ivy Renderer:

Angular introduced a new render engine called Ivy. It is friendly building tool which can be used as backward-compatible Angular renderer which aims mainly on speed improvements, size reduction, and more flexibility by making the size of the app smaller and the compilation faster. According to the Angular Team, switching to Ivy will be smooth.This feature will reduce the code size by gzipped the code which will make compilation faster. Ivy renderer won’t be default in Angular v6. You need to manually enable it by switching on certain compiler option. It might be default in v7 if there are no further issues. 

Service Worker:

Service worker is a script that runs in the web browser and manages to cache for an application. But in angular 6, there are bug fixes and additional features with service worker. 

Schematics and Ng update:

Angular CLI generates Angular artifacts using the technology called Schematics. For making your own templates and have Angular CLI explore it, Schematics will help you with this. So how does Schematics will help? The ng update can automatically update your project dependencies. With Schematics, you’ll be able to create your own code transformations like ng update.

• ng add: The ng-add command in Angular-CLI let's user to download and install new packages in your angular app. ng add @angular/elements
• ng update: If the user wants to upgrade it's angular app from Angular 5 to Angular 6, ng-update is used which let the user update and upgrade packages. ng update @angular/core

The update generally follows 3 steps, and will take advantage of the new ng update tool.

• @angular/cli
• Angular framework packages
• Other dependencies

Added navigationSource and restoredState to NavigationStart:

The Angular Router enables navigation from one view to the next as users perform application tasks. Currently there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled separately for a variety of use cases such as scroll position restoration. This PR adds a navigation source field and restored navigation id (passed to navigation triggered by a URL change). 

Upgrading to RxJS 6:

The latest version of RxJs(version 6.0.0) in Angular 6 has new exciting additional features and changes. These changes provide developers to improve the performance and easier to debug call stacks and improvement also making it as backward compatible as possible.

Tree Shaking in Angular 6:

The Angular team moved from modules referencing services to services referencing modules which reduces your app size.