{"id":17108,"date":"2021-03-05T08:05:11","date_gmt":"2021-03-05T08:05:11","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=17108"},"modified":"2026-03-03T07:12:24","modified_gmt":"2026-03-03T07:12:24","slug":"lazy-loading-in-angular","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/lazy-loading-in-angular","title":{"rendered":"Step by Step Guide on Lazy Loading in Angular 11"},"content":{"rendered":"<style>\nul.index-list {\n    text-align: left;\n    list-style-type: square;\n}\np{\n   width:100%;\n}\n.post-content p img {\n    margin-bottom: 0 !important;\n}\n.text-orange,.text-orange> strong{\ncolor: #ec6100 !important;\nfont-weight: 700;\n}\n.border-box{\npadding: 12px;\nborder: 1px solid #000;\nmargin-bottom: 16px;\n}\n.border-div{border: 1px solid #000; padding: 22px; text-align: center; margin-bottom: 32px;}\n\t\t.border-bottom{\n\t\t\tborder-bottom: 1px solid #000;\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.border-div p{text-align: left;}\n\t\t.cust-list{padding: 0; text-align: left;}\n\t\t.cust-list li{padding-left: 32px; list-style: none}\npre {\n    background: #f7e9dd;\n    border: none;\n    font-size: 16px;\n}\n.cross-platform{\n    background: #f7e9dd;\n    border: none;\n    font-size: 20px;\n    text-align:center;\n    padding:40px;\n}\n.cross-platform a{\n   font-size: 20px !important;\n    font-weight: bold !important;\n    margin-top: 10px;\n    border-radius: 10px !important;\n    background: #ec6100 !important;\n    border: 1px solid transparent !important;\n}<\/p>\n<\/style>\n<div class=\"border-div\">\n<h2 class=\"border-bottom\">Table of Index<\/h2>\n<p><a href=\"#1\"><strong>1. Introduction<\/strong> <\/a><\/p>\n<p><a href=\"#2\"><strong>2. What is Lazy Loading in Angular?<\/strong> <\/a><\/p>\n<p><a href=\"#3\"><strong>3. Why we need Lazy Loading in Angular? <\/strong><\/a><\/p>\n<p><a href=\"#4\"><strong>4. Angular lazy loading example: Steps to implement Lazy Loading<\/strong> <\/a><\/p>\n<p><a href=\"#5\"><strong>5. Watch it being lazily load<\/strong> <\/a><\/p>\n<p><a href=\"#6\"><strong>6. How to verify Lazy Loading in Angular?<\/strong> <\/a><\/p>\n<p><a href=\"#7\"><strong>7. Conclusion<\/strong><\/div>\n<p><\/a><\/p>\n<h2 id=\"1\">Introduction<\/h2>\n<p>We have already discussed Angular routing in Angular v11 in the previous blog. In which I have provided a step-by-step guide for Basic Angular Routing and Nested Routing with params with Github repository. Before learning about how to implement <b>Lazy Loading in Angular<\/b>, I would suggest you to go through that for revising the fundamentals. So, it will be easier for you to understand the angular 11 lazy loading and its implementation.\n <\/p>\n<p>So, let\u2019s be enthusiastic about implementing and learning lazy loading angular 11!<\/p>\n<h2 id=\"2\">What is Lazy Loading in Angular?<\/h2>\n<p>In case you have worked with any front-end frameworks, then you might have heard the term Lazy Loading. The idea behind it is similar irrespective of various frameworks.  <\/p>\n<p>Lazy loading is a technique that permits you to load the javascript components only when their respective routes are active or being hit. It increases the performance and speed of the application by splitting the app into various bundles. As per the user navigation, bundles are being loaded as required.<\/p>\n<h2 id=\"3\">Why we need Lazy Loading in Angular?<\/h2>\n<p>Sometimes we want to load only those routes whose UI is being displayed. For example, if I\u2019m on the Home page right now, I would not prefer to load the Marvel Movies page and DC Movies page. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/05-03-2021-Angular.png\" alt=\"Angular Lazy Loading \" width=\"1100\" height=\"537\" class=\"alignleft size-full wp-image-17116\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/05-03-2021-Angular.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/05-03-2021-Angular-300x146.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/05-03-2021-Angular-1024x500.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/05-03-2021-Angular-768x375.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>You might not understand the advantage of lazy loading in the website having few pages. Still, this technique will create a more significant difference in performance when the application is quite large. For that purpose, I would rather lazily load the components.<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Looking for skilled professionals to develop secure, scalable, and reliable front-end Applications?<\/span><br \/>\nConnect with us to <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">hire Angularjs developer<\/a> to develop a dynamic, user-friendly application exceeding your expectations.<\/strong><\/i><\/p>\n<h2 id=\"4\">Angular lazy loading example: Steps to implement Lazy Loading<\/h2>\n<p>Here\u2019s the <a href=\"https:\/\/github.com\/architanayak\/angular-routing\/tree\/main\" target=\"_blank\" rel=\"noopener\">Github repository<\/a> where you can find the source code.<\/p>\n<h3><u>Create a module and separate routing file<\/u><\/h3>\n<p>Create a module and separate routing file named lazy-loading. The purpose of independent routing is to handle all the components associated with <a href=\"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-11\" target=\"_blank\" rel=\"noopener\">angular 11<\/a> lazy loading modules.<\/p>\n<pre>\r\nng g m lazy-loading --routing\r\n<\/pre>\n<h3><u>Create a component <\/u><\/h3>\n<p>Create a component named lazy-demo within the lazy-loading module<\/p>\n<pre>\r\nng g c lazy-demo\r\n<\/pre>\n<h3><u>Adding Link to Header<\/u><\/h3>\n<p>We will be adding a link in the header on whose route we will implement lazy loading.<\/p>\n<p><strong><em>app.component.html<\/em><\/strong><\/p>\n<pre>\r\n\r\n< li class=\"nav-item\" >\r\n  < a class=\"nav-link\" [ routerLink ]=\"[ '\/lazy-loading' ]\" >\r\n     \tLazy Loading\r\n   < \/a >\r\n< \/li >\r\n\r\n<\/pre>\n<h3><u>Lazy Loading with loadChildren<\/u><\/h3>\n<p>Now, we will lazily load the component, which will be displayed on the route <em>&#8211; \/lazy-loading<\/em><\/p>\n<p>Make necessary changes in <strong>app-routing.module.ts<\/strong>.<br \/>\nHere we will load the module lazily using <strong>loadChildren<\/strong><\/p>\n<p><strong><em>app-routing.module.ts<\/em><\/strong><\/p>\n<pre>\r\n{\r\n   path: 'lazy-loading',\r\n   loadChildren: () =>     import('.\/lazy-loading\/lazy-loading.module')\r\n     .then(m => m.LazyLoadingModule)\r\n},\r\n<\/pre>\n<h3><u>Setting up the route<\/u><\/h3>\n<p>It\u2019s time to set up the route in <strong>lazy-loading-routing.module.ts<\/strong>.<\/p>\n<p><strong><em>lazy-loading-routing.module.ts<\/em> <\/strong>  <\/p>\n<pre>\r\nimport { NgModule } from '@angular\/core';\r\nimport { RouterModule, Routes } from '@angular\/router';\r\n \r\nimport { LazyDemoComponent } from '.\/lazy-demo\/lazy-demo.component';\r\n \r\nconst routes: Routes = [\r\n { path: '', component: LazyDemoComponent }\r\n];\r\n \r\n@NgModule({\r\n imports: [RouterModule.forChild(routes)],\r\n exports: [RouterModule]\r\n})\r\n \r\nexport class LazyLoadingRoutingModule { }\r\n<\/pre>\n<h2 id=\"5\">Watch it being lazily load<\/h2>\n<p>Thus, we have seen the steps for implementing Lazy loading in Angular. After following the instructions, you\u2019ll see something similar to this (excluding CSS and text)-<\/p>\n<div style=\"width: 1170px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-17108-1\" width=\"1170\" height=\"658\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/video.mp4?_=1\" \/><a href=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/video.mp4\">https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/video.mp4<\/a><\/video><\/div>\n<p>You will observe that <em>main.js<\/em> is being served on refreshing the browser. And the Lazy Loading module is loaded only on hitting the route <em>\/lazy-loading<\/em>.<\/p>\n<h2 id=\"6\">How to verify Lazy loading in Angular?<\/h2>\n<p>The video mentioned above is proof that Lazy loading is working fine. But here are other ways to verify the implemented lazy loading in Angular.<\/p>\n<p>Run the following command to generate build-<\/p>\n<pre>\r\nnpm run build\r\n<\/pre>\n<p>And you\u2019ll notice something like this &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_PmqJVY7o0MltHpiv.png\" alt=\"verify Lazy loading in Angular\" width=\"800\" height=\"578\" class=\"alignleft size-full wp-image-17112\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_PmqJVY7o0MltHpiv.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_PmqJVY7o0MltHpiv-300x217.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_PmqJVY7o0MltHpiv-768x555.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>The above image verifies that a separate chunk is generated for the lazy loading module.<\/p>\n<p>Another way to verify is to open the dist folder of your project. There you will notice a separate file for the module which uses Lazy Loading. Below is the reference image &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_ogZ_p8a749URj68S.png\" alt=\"Another way to verify angular lazy loading \" width=\"468\" height=\"550\" class=\"alignleft size-full wp-image-17113\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_ogZ_p8a749URj68S.png 468w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/03\/0_ogZ_p8a749URj68S-255x300.png 255w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/p>\n<h2 id=\"7\">Conclusion<\/h2>\n<p>So, this was about <em>implementing Lazy loading in Angular<\/em> from scratch. Many developers choose ngx-loadable for implementing lazy loading in an existing Angular application. If you don\u2019t have an idea regarding it, you can visit this blog- <a href=\"https:\/\/www.bacancytechnology.com\/blog\/implement-angular-lazy-loading\" target=\"_blank\" rel=\"noopener\">Implement Lazy loading in Angular Web app using ngx-loadable<\/a>.<\/p>\n<p>Despite providing solutions, it is challenging to follow steps when dealing with large-scale applications or decrease production build size by benefiting from Lazy Loading. At such times, it\u2019s beneficial to take help from experts. If you are looking for a helping hand, contact Bacancy Technology and hire Angularjs developer having experience and expertise in Angular web development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Index 1. Introduction 2. What is Lazy Loading in Angular? 3. Why we need Lazy Loading in Angular? 4. Angular lazy loading example: Steps to implement Lazy Loading 5. Watch it being lazily load 6. How to verify Lazy Loading in Angular? 7. Conclusion Introduction We have already discussed Angular routing in Angular [&hellip;]<\/p>\n","protected":false},"author":146,"featured_media":17118,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[989],"tags":[],"coauthors":[2427],"class_list":["post-17108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Nisarg Bhavsar","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/17108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=17108"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/17108\/revisions"}],"predecessor-version":[{"id":58031,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/17108\/revisions\/58031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/17118"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=17108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=17108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=17108"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}