What's New Features And Improvements In Angular 6

Angular 6 release is just around the corner which will be the major update from version 5. So we are highlighting some of its new features announced by the Angular Team. In 2017, Angular, one of the most popular JavaScript framework for building mobile and desktop applications, Released two major upgrades in 14 months. It reached the next milestone with Angular 5 arrival on November 1, 2017. The Angular 5.0 upgrade itself centered on making the framework faster, smaller, and easier to use.

Version 6 continues and will focus on being smaller, faster and easier to use but before jumping to the topic let's see some features of version 5.

Angular 5 Key Features 

HttpClient

In version 4.3 was launched HttpClientwithin @angular/common as a smaller, simpler and more powerful way to make web requests in Angular. From this new version, Google recommends using it HttpClient for all applications, and stop using the "traditional" library @angular/HTTP that is marked as obsolete.

Multiple Export Alias

Now we can provide multiple names to your components and directives in Angular 5 while exporting. Exporting a component with multiple names can help your users migrate without breaking changes.

Internationalized Number, Date, and Currency Pipes

Angular 5 has introduced new pipes for numbers, dates and currencies that increase the standardization of the process of internationalization between browsers and eliminate the need to use polyfills to achieve it.

Improved Decorator Support

Angular 5 now supports expression lowering in decorators for lambdas, and the value of useValue, useFactory, and data in object literals. Furthermore, a lambda can be used instead of a named function like so:

Build Optimization

The build optimizer removes Angular decorators from your app's runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application. This action leads to a decreased bundle size and faster application speed.

Check out detail blog post on What's New Introduced In Angular 5

Let's see the important Angular 6 features.

Angular Elements

Angular is a perfect choice for developing Single-Page Applications, creating a widget that can be added to any existing web page was not a simple task. The Angular Elements package will allow you to create an Angular component and publish it as a Web Component, which can be used in any HTML page.

Say there is an existing non-SPA app built using JavaScript and jQuery. The developers of this app will be able to use Web Components built in Angular in the pages of such an app. This killer feature will help the enterprise to switch to the Angular framework for web application development.

Ivy Renderer

Ivy is a new backward-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility by making the size of the app smaller and the compilation faster.The Angular Team promises that switching to Ivy rendered will be smooth. This important feature will reduce the code size by gzipped the code which will make compilation faster. Ivy isn't landing in Angular 6, though the experimental flag will be there and it's more likely to land around  v7 timeframe.

Closure Compiler

Closure Compiler is the bundling optimizer used to create JavaScript modules for almost all Google web applications. The Closure Compiler consistently generates smaller bundles and does a better job in dead code elimination compared to Webpack and Rollup bundlers. In the upcoming releases of the Angular framework, you’ll be able to use this toolchain for building your apps as well.

Bazel Compiler

Bazel only rebuilds what is necessary, it is used almost for all software built at Google, including their 500+ apps developed in Angular. Since source code changes often, it doesn’t make sense to rebuild the entire application for every little change. Instead, we should only rebuild code that actually changed, and code that depends on the changes, With advanced local and distributed caching, optimized dependency analysis and parallel execution, you get fast and incremental builds. 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 allow us 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. CDK was released in December of 2017, but the Angular Team keeps improving it.

Service Worker

It is a script that runs in the web browser and manages to cache for an application. Service worker is included in angular 5. In angular 6 service worker comes with bug fixes and additional feature.

Schematics

Angular CLI generates Angular artifacts using the technology called Schematics. If you decide to create your own templates and have Angular CLI explore it, Schematics will help you with this. Staring from Angular CLI 1.7, you can use the ng update that automatically updates your project dependencies and makes automated version fixes. With Schematics, you’ll be able to create your own code transformations like ng update.

ng add

The Angular team has added ng-add command in Angular-CLI which 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 so angular team added support for ng-update to its Angular-CLI 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.

• Update @angular/cli
• Update your Angular framework packages
• Update other dependencies

Learn more about how to update your Angular app 

Router

Added navigationSource and restoredState to NavigationStart , NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled differently for a variety of use cases (e.g., scroll position restoration). This PR adds a navigation source field and restored navigation id (passed to navigations triggered by a URL change).

Language Service

The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by '/' instead of being able to handle '\'.

Upgrading to RxJS 6

The latest version of RxJs(version 6.1.0) is added in Angular 6 with it new exciting additions and changes. These changes provide developers a boost in performance and easier to debug call stacks and improvement in modularity 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 to make your app smaller. This allows only bundle services into your code base in modules where they are injected.

Animations Performance Improvements

As they have updated implementation of Animations in which we no longer need the web animations polyfill and by removing polyfill from your application we can save approximately 47KB of the bundle size which improves animation performance in Safari.

These are few changes included in Angular 6

• Typescript 2.7.x supports
• Improved decorator error messages
• Fix platform-detection example for Universal
• Added to supports of Native-Element
• Added Optional generic type for ElementRef
• Updates on NgModelChange
• Add type and hooks to directive def
• Enable size tracking of a minimal CLI render3 application
• Add canonical view query
• <template> is no longer supported you have to use the previously existing <ng-template> instead.
• The Angular team have decided to extend the long-term support (LTE) to all major releases starting with v4.
• Web pack module bundler has been updated to version 4

we are looking forward to these features that will make Angular 6 even better than it's previous versions, but what else could be improved, Angular CLI is a great tool, but it has major dependencies on the third-party software. Several times we’ have experienced broken builds in the latest releases of Angular CLI that were caused by some erroneous release of a third-party package.The Angular CLI folks are pretty good at releasing patches when errors are reported, but the process of regression testing should be improved, so these errors wouldn’t even sneak in.Look for the Breaking Changes headers in the Changelog markdown file at Github

Conclusion

The Angular team has started providing the regular updates from the version 2 and these are few details about the angular releases in previous years.