Eager, Lazy and preloading
Posted By : Nutan Verma | 13-Jan-2021
There are 3 types of loading
- Eager Loading
- Preloading
- Lazy Loading
- Introduction to Eager Loading: Eager Loading is default loading in Angular, In this, all the features get loaded before starting the application, we can use eager loading for small size applications, secondly we need to use this loading for Core module and feature module which is needed to start our application for example authorization, authentication, error handling, routing, etc.
- Introduction to PreLoading: In this, All the features will start after out application starts
- Introduction to Lazy Loading: It is the best practice, as these features will upload on-demand, and so will take lesser time to start the application, we use it basically for large-sized applications
Implementing Lazy Loading
Let's suppose we have these components
Also Read: Pipes in Angular
First, we will register Components of lazy loading in lazy loading routing
import { Child2Component } from './lazy-loading-home/child2/child2.component';
import { LazyLoadingHomeComponent } from './lazy-loading-home/lazy-loading-home.component';
{path: '', component: LazyLoadingHomeComponent, children:[
{path: '', redirectTo: 'child1', pathMatch: 'full'},
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component}
]},
{path: '**', redirectTo: ''}
];
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(routes)
],
exports:[
RouterModule
]
})
export class LazyLoadingRoutingModule { }
After this we will import LazyLoadingModule in lazy-loading.moudule.ts
import { Child1Component } from './lazy-loading-home/child1/child1.component';
import { Child2Component } from './lazy-loading-home/child2/child2.component';
import { LazyLoadingRoutingModule } from './lazy-loading-routing.module';
declarations: [
LazyLoadingHomeComponent,
Child1Component,
Child2Component
],
imports: [
CommonModule,
LazyLoadingRoutingModule
]
})
export class LazyLoadingModule { }
Also Read: Angular Components And Their Working Methodologies
Our lazy loading module is now ready to lazily load, we need to register out LazyLoadingModule in app.module.ts
path: 'lazy-loading',
loadChildren: './features/lazy-loading-module/lazy-loading.module#LazyLoadingModule'
},
Choose Oodles For SaaS App Development Services
We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Nutan Verma
She works as a Frontend Developer. She keeps looking for challenges which demands the best of her professional ability in terms of technical, analytical skills. She is always energetic and competent.