Angular 2/4 mostly focuses on Improving performance and usability of the new angular application over its predecessor (Angular 1X.) using several modification in code alongside its building and deployment process on the platform on which it is running.
Here are a few ways in which we can improve the Performance of an Angular Application.
In Angular 2/4 Ahead-of-Time the Compilation works Just like JIT (Just-in-Time Compilation) in fact there is only one Compiler.
The difference between AOT and JIT is a matter of timing and tooling.
In a Nutshell what it basically does is analyses the HTML Templates and Its Angular Components. It tries to figure out what you are trying to do inside those templates and then it translates them into pure JavaScript Code.
So this way you don’t have to ship your entire Angular Compiler Along with the Code to be compiled.
You Just Ship Your Pre-Compiled JavaScript Code as AOT Compilation Compiles your Code at Built-time and not on the Browser at Run-time.
Also AOT provides a better performance boost on Client Machine as lesser time is required to download the angular modules
While also providing security advantages to the developer as AOT compiles HTML templates and components into their respective javascript files before they are served to the browser.
With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.
Template Binding errors are detected on build time on the development machine itself and not on the earlier way of error recognition on runtime in JIT compilation.
The main purpose of lazy loading is to reduce the application Start-up time.
The concept of lazy loading the angular application mainly prevents loading everything at once hence it only needs to load what the user expects to see when the app first loads.
Lazily loaded modules will only be loaded when the user navigates to their routes.
In larger applications there may consist hundreds of modules loading them initially might take a long time while loading unnecessary components which may not be needed.
To implement lazy loading the following code must be added to implemented.
In our mainrouting.ts file in the angular application
Import {Routes, RouterModule} from '@angular/router';
Let us first import the libraries required from the ‘@angular/router' in node modules
@NgModule({
imports: [
RouterModule.forChild([
{
path: '', component: ParentComponent,
children: [
{ path: '', redirectTo: 'Child1', pathMatch: 'full' },
{ path: 'Child1', component: Child1Component },
{ path: 'Child2', component: Child2Component },
{ path: 'Child3', component: Child3Component }
]
}
])
],
exports: [
RouterModule
]
})
In Angular application we can use caching to avoid making server calls for the same data repeated times.
This data which may be called once will be stored on the local storage on the client side.
Caching in Angular can be done in a number of ways.
A few routes of going about in Caching Data are ng2-cache and LocalStorage.
Where ng2-cache is an external library which has to be used in the our application using the command
npm install ng2-cache –save.
Let result: string = this._cacheService.set ('key', ['some data']);
By default ng2-cache service store data in session storage but we change the storage to our preferred location:
LocalStorage property on the other hand is an inbuilt HTML property that we can use to keep data cached in our browser memory.
It works as key value pair to preserve our data.
We can even use to pass our data on to other frameworks or a page in pure JavaScript as it is a HTML property.
We can use the following code to set the data to be cached
localStorage.setItem('key', 'value');
Tree shaking is an algorithm that was first introduced in Rollup.js and now currently is a part of webpack 2.
Tree shaking algorithm helps webpack to remove unused code while bundling our angular application.
Webpack basically bundles our angular modules into chunks of code which can be loaded into our client easily and do not require multiple request from client side once loaded.
It has the ability to include multiple style sheets, images and html files as well as script files as dependencies .
Hence specifying an app root means Webpack will automatically package all of the app’s assets and create bundle.js files for it.
Smart Bundling in Webpack of shared dependencies for multiple apps allows common dependencies are served from a common file.
In webpack bundling is done efficiently to allow on demand loading.
The Components in an Angular application by default undergo change detection in nearly each and every scenario of user interaction.
But we can take control of this process in angular by indicating to angular application if a component in a subtree is up to date and hence we can exclude it from change detection.
To do this we need to import ChangeDetectionStrategy from '@angular/core' as given below:
import {ChangeDetectionStrategy} from '@angular/core';
While adding “ChangeDetectionStrategy.OnPush” in the @Component decorator
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
We can customize and gain more control on change detection by using ChangeDetectorRef service.
Change Detection for a particular functionality in an angular component can be Switched off or more appropriately saying the functionality can be detached by using
this.changedetection.Detached ()
To allow single pass of change detection for the angular application
this. changedetection.markForCheck ();
To detect changes of the entire component in a single pass in change detection
this. changedetection.detectChanges ();
To reconnect this component back to the change detection process
this. changedetection.reattach ();
An Angular 2/4 application’s components have its own change detector also angular application consists of a component tree, which results is that we get a change detector tree as well. This change detection tree in angular can be seen as a directed graph from in which data always flows from top components to bottom.
