How to use loadChildren - Lazyloading in Angular

Angular - How to use loadChildren - Lazyloading in Angular, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE

  Lazy loading in Angular

  • Lazy loading modules in Angular allows you to load modules when it is actually necessary.
  • Lazy loading will help you to achieve performance.
  • Lazy loading will help you to decrease the size.
  • By using loadChildren(), we can implement Lazy loading in Angular 
Let's take an example to understand it
  •      Create a project, which will load different components from a different module.

We will follow below method to implement lazy loading
  • Step 1 : Create a new project using command ng new project-name
  • Step 2 : Create  3 different module to implement lazy loading 
  • Step 3 : Open app\app-routing.module.ts and place below code 
    import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'college', <b>loadChildren</b>: () =&amp;; import('./college/college.module').then(college =&gt;; // tslint:disable-next-line: no-unused-expression college.CollegeModule ) }, { path: 'student', loadChildren: () =&gt;; import('./student/student.module').then(student =&gt;; // tslint:disable-next-line: no-unused-expression student.StudentModule ) }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

      loadChildren -> This is lazy loading 😊

  • Step 4: Open  app.module.ts and place and replace import with below code
    imports: [ BrowserModule, AppRoutingModule, CollegeModule, StudentModule ],
  • Step 5: open app.component.html and place below code 
    • <h1> <a home="" href="https://www.blogger.com/u/1/null" routerlink="">Home Page From App Module </a> </h1> <h1> <a college="" href="https://www.blogger.com/u/1/null" routerlink="">Colleg Page from College Module </a> </h1> <h1> <a href="https://www.blogger.com/u/1/null" routerlink="" student="">Student Page from College Student </a> </h1> <hr /> <router-outlet></router-outlet>
  • Step 6:  hit ng serve command. it will start working

Comments

Post a Comment

Popular posts from this blog

How to disable table row in Angular

How to disable table row in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   How to disable table row in Angular In this article we will learn how to disable every alternate (even) row in Table by using CSS. Step 1: Let's create an HTML table using below code                                     <table class="main-table">                   <thead>                      <tr>                         <th>                             Sr No.                          </th>                         <th>                              Fruit Name                          </th>                      </tr>                   </thead>                   <tbody>                      <tr *ngFor="let fruit of duplicateArray; let i = index; let even = even">                         
Read more

How to create XML file dynamically in c#.net?

Image
How to disable table row in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE How to create XML file dynamically in c#.net? In this article we will learn , How to create dynamic file in c#.net using ASP.NET CORE C# Step 1: Let's create a solution to implement How to create XML file dynamically in c#.net? File -> New -> Project -> ASP.NET Core Web Application -> Next -> Enter file name and click create Step 2: Create a new action method in Home controller and create a view and add below html code in view @{ ViewData["Title"] = "Generate XML File"; } @ViewData["Title"] We will use this page to generate XML file. Step 3: Create a new action like below and have a look on below Code [HttpPost] public IActionResult GenerateXMLFile(string action) { if (!string.IsNullOrEmpty(action)) { string xmlData = generateFile(); string xmlString = xmlData; string f
Read more

How to get Array value in Angular ?

How to get Array value in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE How to get Array value in Angular? In this article we will learn , How to get array value in Angular . Step 1 : Create a new Angular Project using below command ng new angular-tour-of-heroes Step 2 : Create a new component using below command ng generate component how-to-get-array-value-in-angular Step 3 : Add Below code in how-to-get-array-value-in-angular.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-how-to-get-array-angular', templateUrl: './how-to-get-array-angular.component.html', styleUrls: ['./how-to-get-array-angular.component.scss'] }) export class HOWTOGETArrayAngularComponent implements OnInit { fruits = ['Apple', 'Orange', 'Banana', 'blackberry', 'blackcurrant', 'blueberry', 'cherry' , 'coconut'
Read more