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

React Native Fundamentals

Image
React Fundamentals, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   React Fundamentals React Native runs on  React , a popular open-source library for building  user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course   Here, we will learn how to create a simple Hello World in react native   Let’s create a simple application of React Native We will follow the below command to create a Hello Worlds in React Native   Use below command to install React native ·       npm install –g react-native-cli   The above instructions work best if you need to build native code in your application or want to integrate React Native in an existing application. If you want to quickly prototype an application and you can use  Create React Native App  module th...
Read more

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>                     ...
Read more

What’s the Difference Between Razor and Blazor

What is the Difference Between Razor and Blazor, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE Blazor Blazor enables sharing code across client- and server-side processes, server-side rendering functionality, and more. When building a single-page application, Angular or React are popular JavaScript frameworks to use.  Blazor is a framework for building interactive client-side web UI with .NET: ·          Create rich interactive UIs using C# instead of JavaScript. ·          Share server-side and client-side app logic written in .NET. ·          Render the UI as HTML and CSS for wide browser support, including mobile browsers. ·          Integrate with modern hosting platforms, such as  Docker . ...
Read more