New Features of Angular 8

Posted By : Aman Bajpai | 22-Aug-2019

 Introduction: Angular is among One of the most popular Javascript frameworks. On 23 May 2019 Angular has released its latest Angular 8 version. 
 This latest release of Googles Angular framework has bought several attractive features that made Angular 8 unique compared to the previous versions of Angular.
 Here we will discuss the top 6 Angular 8 features which are mindblowing and an eyecatching to users.


Angular 8 has arrived and with it a good amount of workflow and a new set of powerful features that Angular developers will appreciate like the core framework,

List of Top 6 Angular 8 Features:

 

1.Differential loading by default:


       This is a great feature: it lets the user's of our app's get exactly the JavaScript bundle that fits their particular device or browser.
        It is a process by which the browser chooses between modern or legacy JavaScript based on its capabilities.
        With differential loading, new apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+).

 

2.Ivy Rendering engine:
        If you have been following Angular then you probably encountered the popular word. 
        It is a major change in Angular history, it an angular renderer which is radically different from anything as it uses incremental DOM.
        Its project is rewriting the Angular compiler and runtime code to reach

  • better incremental approach.
  • better build sizes more compatible with tree-shaking.
  • new and better potential features like lazy loading of the component instead of modules.

        This is how Angular Ivy works on Incremental DOM --


        The key idea support Incremental DOM is every component gets compiled into a series of instructions. These specifications create DOM trees and update them in-place when the data changes.

 

@Component({
selector: 'first-component',
template:

{{f.description}}

` })

class firstComponent { first: Observable = this.store.pipe(select('first')); constructor(private store: Store) {} } Will be compiled into: var TodosComponent = /** @class */ (function () { function FirstComponent(store) { this.store = store; this.first = this.store.pipe(select('first')); } FirstComponent.ngComponentDef = defineComponent({ type: FirstComponent, selectors: [["first-component"]], factory: function FirstComponent_Factory(t) { return new (t || FirstComponent)(directiveInject(Store)); }, consts: 2, vars: 3, template: function FirstComponent_Template(rf, ctx) { if (rf & 1) pipe(1, "async"); template(0, FirstComponent_div_Template_0, 2, 1, null, _c0); } if (rf & 2) { /** create dom*/ elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos))); } }, encapsulation: 2 }); return FirstComponent; }());


3.Bazel Support:
       this is the new features of Angular 8 . the likelihood to build your CLI application with Bazel. 
       The Angular framework itself is built with Bazel.

 Bazel's key advantages are:

  •        We will be able to build our backends and frontends with the same tool
  •        Increase build time The first build will be painfully slow, 
  •        as Bazel is aiming for exactly reproducible builds but concurrent builds will be a lot faster & it will be beneficial if your app uses several modules and libraries.  

4.Opt-In Usage Sharing:


       To keep their efforts in alignment with the community's and users need Angular CLI will be gaining another new feature i.e opt-in usage sharing.
      
       Apart from this, there are other features like:

  •            Dependency brings up to date on the tools, like Typescript, RxJs, Node, etc.

5.CLI workflow improvements:
      The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped to be extended by 3rd-party libraries and tool. 
       For Example AngularFire

 

6.Builders API:
     This version allows us to use Builders API. 
      Basically, This is a function that implements the logic and behavior for a task that can replace a command which you pass to the createBuilder() method from    @angular-devkit/architect package & now we can create our custom builders as well.

 

import { BuilderOutput, createBuilder } from '@angular-architect';
export default createBuilder((options, context) => {
              return new Promise(resolve => {
                resolve({ success: true });
              });
});   
        

Conclusion

The framework is getting smoother and easier making the Angular platform better and excellent to work upon.

About Author

Author Image
Aman Bajpai

He is working as a Frontend developer and have good knowledge of Html, Css, Jquery, Javascript. In free time he likes to play cricket,chess and socialising,travelling.

Request for Proposal

Name is required

Comment is required

Sending message..