{"id":32801,"date":"2021-05-04T18:00:00","date_gmt":"2021-05-04T16:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=32801"},"modified":"2021-05-05T09:29:16","modified_gmt":"2021-05-05T07:29:16","slug":"using-lazy-loading-pattern-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/","title":{"rendered":"Using Lazy Loading pattern in Angular"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?resize=1024%2C608&#038;ssl=1\" alt=\"angular lazy loading\" class=\"wp-image-32760\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-1024x608.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-980x582.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-480x285.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">One of the fundamental concepts of Angular are the Modules called NgModules. We can define a NgModule as a container of blocks of code that belong to the same flow, to the same functionality, or are dedicated to a specific application domain. Within these modules, we can find components, services, and other code files whose purpose is defined by the NgModule itself.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each Angular application has at least one module, the root module, which by convention is called <strong>AppModule<\/strong> and is defined in <strong><em>app.moduel.ts<\/em><\/strong>. Here is an example of how it is structured<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport { NgModule } from &#039;@angular\/core&#039;; \nimport { BrowserModule } from &#039;@angular\/platform-browser&#039;; \n@NgModule({ \n        imports:     &#x5B; BrowserModule ], \n        providers:    &#x5B; Logger ], \n        declarations: &#x5B; AppComponent ], \n        exports:      &#x5B;], \n        bootstrap:    &#x5B; AppComponent ] \n}) \nexport class AppModule { } \n\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Many other modules can be defined in complex applications besides the AppModule, adding them to the<strong> imports<\/strong> array. By default, the modules declared in the<em> imports array<\/em> are loaded when the application starts, even if they are not immediately used.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, this has a cost in terms of time, especially if it is an application that owns many routes that belong to different modules.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is good to apply the Lazy Loading design pattern in these cases, which allows us to load the modules only when we need them, obtaining a smaller initial bundle and a faster application loading.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The use of this pattern in our application requires only few steps. First of all, our application must have routing management through the import in the AppModule of the NgModule <strong>RouterModule<\/strong> and the use of the following instruction inside the import array:&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forRoot(&#x5B;  \n                {path: &#039;first&#039;, component: FirstComponent},  \n                {path: &#039;second&#039;, component: SecondComponent},  \n                ]), \n... \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In this way, we can see in our application a specific view based on the navigation path in the URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, remember to add the <em>RouterModule<\/em> to the list of <strong>exports<\/strong> to import it from the different modules used in the application.&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nexports: &#x5B; \n                RouterModule \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The second step is to replace the component that we want to show to a given <em>path <\/em>using the instruction:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nloadChildren: () =&gt; import(&#039;.\/first\/first.module&#039;).then(m =&gt; m.FirstModule) \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">you get<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forRoot(&#x5B;  \n                        {path: &#039;first&#039;,  loadChildren: () =&gt; import(&#039;.\/first\/first.module&#039;).then(m =&gt; m.FirstModule) },  \n                        {path: &#039;second&#039;, component: SecondComponent},  \n                ]), \n... \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">And adding <em>routing<\/em> in <em>FirstModule <\/em>too<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nconst routes: Routes = &#x5B; { path: &#039;&#039;, component: FirstComponent} ]; \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">But, this time, through the <strong>forChild<\/strong> instruction (we will see the difference between forChild and forRoot later)&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forChild(routes) \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Finally, make sure that <em>FirstModule<\/em> is not present in the <em>AppModule\u2019s import array<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To verify that you have configured everything correctly, we can start the application and open the browser developer tool, positioning us in the Network section.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At this point, when we try to navigate to FirstComponent, a call similar to the one in the figure will appear.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"665\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01.png?resize=1024%2C665&#038;ssl=1\" alt=\"\" class=\"wp-image-32771\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-1024x665.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-980x636.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-480x312.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This call will be made only once for each module loaded via Lazy Loading, the first time we will access that path, in our case<strong><em> localhost:4200\/first.<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To conclude the argument, we must clarify the difference between <strong>forRoot <\/strong>and <strong>forChild<\/strong>. Let&#8217;s see why we used forRoot in the AppModule and forChild in the feature Modules.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The RouterModule has its route management service; this service is a singleton and must be registered only once within the application.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To give the possibility to register the service only once, the Angular team exposed the two static forRoot and forChild methods, which return a<strong> ModuleWithProviders<\/strong> interface. In Angular, you can also import a module via the ModuleWithPRoviders interface, which has the following structure:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ninterface ModuleWithProviders&lt;T&gt; {  \n        ngModule: Type&lt;T&gt;  \n        providers?: Provider&#x5B;]  \n} \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In this way, in addition to the module, the list of providers associated with it is also imported, so that they are registered in the <em>dependency injection<\/em> engine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The<em><em> forRoot<\/em> <\/em>returns a <em>ModuleWithProvider<\/em>s object containing as ngModule the RouterModule, and in the list of providers returns the <em>RouterService. forChild<\/em>, instead, returns the same object but with the list of providers empty. This ensures that RouterService is only registered once.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you try to record RouterModule using the forRoot method, even in one of the feature modules, you get the following error in the console when you access the module&#8217;s path in question.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"542\" data-attachment-id=\"32776\" data-permalink=\"https:\/\/blexin.com\/en\/lazyloadingimage02-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?fit=828%2C542&amp;ssl=1\" data-orig-size=\"828,542\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"LazyLoadingImage02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?fit=828%2C542&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?resize=828%2C542&#038;ssl=1\" alt=\"\" class=\"wp-image-32776\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png 828w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02-480x314.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 828px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I hope that the topic has interested you and, if you are interested to deepen the use of this framework, I invite you to read the <a href=\"https:\/\/blexin.com\/en\/tag\/angular-en\/\" target=\"_blank\" rel=\"noreferrer noopener\">articles on Angular<\/a> in our blog.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To the next article!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s see how to import modules efficiently <\/p>\n","protected":false},"author":196716250,"featured_media":32761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637524],"tags":[688637390],"class_list":["post-32801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using Lazy Loading pattern in Angular - Blexin<\/title>\n<meta name=\"description\" content=\"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Lazy Loading pattern in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-04T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-05T07:29:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1105\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adolfo Arnold\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adolfo Arnold\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/\"},\"author\":{\"name\":\"Adolfo Arnold\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"headline\":\"Using Lazy Loading pattern in Angular\",\"datePublished\":\"2021-05-04T16:00:00+00:00\",\"dateModified\":\"2021-05-05T07:29:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/\"},\"wordCount\":659,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/\",\"name\":\"Using Lazy Loading pattern in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"datePublished\":\"2021-05-04T16:00:00+00:00\",\"dateModified\":\"2021-05-05T07:29:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"description\":\"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"width\":1105,\"height\":656,\"caption\":\"angular lazy loading\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/using-lazy-loading-pattern-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Lazy Loading pattern in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\",\"name\":\"Adolfo Arnold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"caption\":\"Adolfo Arnold\"},\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/author\\\/adolfo-arnoldblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Lazy Loading pattern in Angular - Blexin","description":"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Using Lazy Loading pattern in Angular - Blexin","og_description":"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern","og_url":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/","og_site_name":"Blexin","article_published_time":"2021-05-04T16:00:00+00:00","article_modified_time":"2021-05-05T07:29:16+00:00","og_image":[{"width":1105,"height":656,"url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","type":"image\/png"}],"author":"Adolfo Arnold","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Adolfo Arnold","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/"},"author":{"name":"Adolfo Arnold","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"headline":"Using Lazy Loading pattern in Angular","datePublished":"2021-05-04T16:00:00+00:00","dateModified":"2021-05-05T07:29:16+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/"},"wordCount":659,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/","url":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/","name":"Using Lazy Loading pattern in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","datePublished":"2021-05-04T16:00:00+00:00","dateModified":"2021-05-05T07:29:16+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"description":"Improve the performance of your Angular application by loading modules only when necessary: with Lazyloading pattern","breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","width":1105,"height":656,"caption":"angular lazy loading"},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/en\/blog-en\/using-lazy-loading-pattern-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Using Lazy Loading pattern in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517","name":"Adolfo Arnold","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","caption":"Adolfo Arnold"},"url":"https:\/\/blexin.com\/en\/author\/adolfo-arnoldblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-8x3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/32801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716250"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=32801"}],"version-history":[{"count":4,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/32801\/revisions"}],"predecessor-version":[{"id":32814,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/32801\/revisions\/32814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/32761"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=32801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=32801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=32801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}