How to create an admin page using Lazy-loading in Angular

 The term “lazy-loading” is majorly being used by .Net backend developer when referring to entity creation using Entity framework. The concept of lazy-loading can be simplified to load an object on demand. geeksforgeeks.com defined Lazy loading (also called on-demand loading) as an optimization technique for the online content, be it a website or a web app.

Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user. The opposite of lazy-loading is eager-loading: Eager-loading is just a simple term of loading all web content at once. For best practice and performance, lazy-loading technique is the best approach.

Most of the web applications require admin section which always follow the same UI design. The key layout structure of the admin section (or panel) is Header, Sidebar, and body-layer.

In this publication, I will show you how to build an admin application using lazy-loading technique in Angular(Angular 8).

Full-Layout Representation

Let’s get Started:

let’s create a new angular project using command line interface (CLI).

ng new AdminProject

From my previous publication, I showed how to add bootstrap to an angular application, you can quickly revisit it here. Bootstrap is being added to this project.

Let’s create Admin Layout Module using CLI

ng generate module AdminLayout --routing=true

ng generate component Admin-layout/AdminLayout --flat=true

(shortcut to generate g, module m and component c )

Let’s create Login Module using CLI

ng generate module login --routing=true

ng generate component login/login --flat=true

How to lazy load module

Let’s start with how lazy load work in Angular 4 to Angular 7. We usually define lazy loaded routes as a relative path to some module in the local application. This syntax is a bit complicated referencing the path because there is no warning or error notification. Angular Team changed the way lazy-loading technique works in Angular 8.

Lazy-Loading in Angular 7 below

In Angular 8, the loadChildren property uses ES6 shortcut function declaration with import statement to reference the path, then reference the module itself.

Lazy-Loading in Angular 8

If you have built an application in angular 7 below and you want to update the project to angular 8, check this out https://update.angular.io

The admin Section

The layout of the admin section contains the header component, the sidebar component and admin-layout component, admin-layout.html has header, sidebar selector and the router-outlet. Sample code

<app-header> </app-header>

<app-sidebar> </app-sidebar>

<router-outlet> </router-outlet>

Admin page Representation

The NgModule: RouterModule.forChild is being used here. We are routing to the child modules of the AppModule. You can learn more on forRoot and forChild on https://angular.io/api/router/RouterModule

Admin Layout routing

Overview of the structure of the folder:

Folder Structure

The final routing module is here… The UserRoutingModule is the child of admin-layout-routing module.

User Routing

You can download the code below :

sensationalkunlex/LazyLoadingInAngular

Contribute to sensationalkunlex/LazyLoadingInAngular development by creating an account on GitHub.

github.com

Conclusion: In this article, I have shown you how to create an admin page using Lazy-loading in Angular 8. I will continue in the next article by adding AuthGuard to the project. kindly click on the clap button. If you have any question contact me sensationalkunlex@gmail.com or sensationalkunlex@live.com