{"id":235,"date":"2018-03-27T18:40:00","date_gmt":"2018-03-27T16:40:00","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=235"},"modified":"2020-05-27T18:41:19","modified_gmt":"2020-05-27T16:41:19","slug":"angular-lazy-load-modules-2","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/","title":{"rendered":"Angular Lazy Load Modules"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular&#8217;s ability to delay code loading with the angular router.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The idea behind lazy loading is that only downloading the HTML, CSS and JavaScript it needs to create the first view of the application, and then load additional parts of the application when necessary. The good news is that Angular application has lazy loading by default. The angular router accepts location of the feature module with <code>loadChildren<\/code> and load only when the route becomes active.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;application\/typescript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;TypeScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;typescript&quot;}\">import { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\n\nconst routes: Routes = [\n  {\n    path: '',\n    redirectTo: 'feature-1',\n    pathMatch: 'full'\n  },\n  {\n    path: 'feature-1',\n    loadChildren: '.\/feature-1\/feature-1.module#Feature1Module',\n  },\n  {\n    path: 'feature-2',\n    loadChildren: '.\/feature-2\/feature-2.module#Feature2Module',\n  },\n  {\n    path: 'feature-3',\n    loadChildren: '.\/feature-3\/feature-3.module#Feature3Module'\n  }\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes)\n  ],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Default basic angular lazy loading greatly increases the initial load time of the application. It can help the application load quickly, but if a user goes to a new page, that part of the application must be downloaded before the user can view it. There may be a slight delay while this download is taking, and it may take a few seconds if it is on a slow network.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can further optimize this. When integrated into Angular, we can use preloading strategies. There are two that come out of the box with Angular; NoPreloading and PreloadAllModules. NoPreloading doesn\u2019t preload any modules. PreloadAllModules loads all modules in the background. While the lazy loading style keeps the core starter pack small at first load and it also loads all of the lazy modules in the background. This means that the module is already loaded into memory when the user clicks the link. This mechanism allows Angular to start building immediately, instead of waiting for the module to be downloaded over the network.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;application\/typescript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;TypeScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;typescript&quot;}\">import { NgModule } from '@angular\/core';\nimport { PreloadAllModules, Routes, RouterModule } from '@angular\/router';\n\nconst routes: Routes = [\n  {\n    path: '',\n    redirectTo: 'feature-1',\n    pathMatch: 'full'\n  },\n  {\n    path: 'feature-1',\n    loadChildren: '.\/feature-1\/feature-1.module#Feature1Module',\n  },\n  {\n    path: 'feature-2',\n    loadChildren: '.\/feature-2\/feature-2.module#Feature2Module',\n  },\n  {\n    path: 'feature-3',\n    loadChildren: '.\/feature-3\/feature-3.module#Feature3Module'\n  }\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })\n  ],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>preloadAllModules<\/code>&nbsp;is a sensible default for most apps if needed it is also possible to define custom pre-loading strategies in Angular.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular&#8217;s ability to delay code loading with the angular router. The idea [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[22,4,46],"class_list":["post-235","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-angular","tag-javascript","tag-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular&#039;s ability to delay code loading with the angular router. The idea\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Celilsemi Sam Erkiner\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Celilsemi Sam Erkiner - Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Angular Lazy Load Modules\" \/>\n\t\t<meta property=\"og:description\" content=\"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular&#039;s ability to delay code loading with the angular router. The idea\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-03-27T16:40:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-05-27T16:41:19+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Angular Lazy Load Modules\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular&#039;s ability to delay code loading with the angular router. The idea\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#blogposting\",\"name\":\"Angular Lazy Load Modules\",\"headline\":\"Angular Lazy Load Modules\",\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#articleImage\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"datePublished\":\"2018-03-27T18:40:00+02:00\",\"dateModified\":\"2020-05-27T18:41:19+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#webpage\"},\"articleSection\":\"Front End Engineering, angular, javascript, typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"position\":2,\"name\":\"Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"position\":3,\"name\":\"Software Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"position\":4,\"name\":\"Front End Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#listItem\",\"name\":\"Angular Lazy Load Modules\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#listItem\",\"position\":5,\"name\":\"Angular Lazy Load Modules\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#organizationLogo\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"image\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#authorImage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866\",\"width\":96,\"height\":96,\"caption\":\"Celilsemi Sam Erkiner\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#webpage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/\",\"name\":\"Angular Lazy Load Modules\",\"description\":\"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular's ability to delay code loading with the angular router. The idea\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/angular-lazy-load-modules-2\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"datePublished\":\"2018-03-27T18:40:00+02:00\",\"dateModified\":\"2020-05-27T18:41:19+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Angular Lazy Load Modules","description":"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular's ability to delay code loading with the angular router. The idea","canonical_url":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#blogposting","name":"Angular Lazy Load Modules","headline":"Angular Lazy Load Modules","author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#articleImage","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"datePublished":"2018-03-27T18:40:00+02:00","dateModified":"2020-05-27T18:41:19+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#webpage"},"isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#webpage"},"articleSection":"Front End Engineering, angular, javascript, typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/celilsemi.erkiner.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","position":2,"name":"Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","position":3,"name":"Software Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","position":4,"name":"Front End Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#listItem","name":"Angular Lazy Load Modules"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#listItem","position":5,"name":"Angular Lazy Load Modules","previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"}}]},{"@type":"Organization","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization","name":"Celilsemi Sam Erkiner","description":"Blog","url":"https:\/\/celilsemi.erkiner.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#organizationLogo","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"image":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author","url":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/","name":"Celilsemi Sam Erkiner","image":{"@type":"ImageObject","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#authorImage","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/litespeed\/avatar\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866","width":96,"height":96,"caption":"Celilsemi Sam Erkiner"}},{"@type":"WebPage","@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#webpage","url":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/","name":"Angular Lazy Load Modules","description":"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular's ability to delay code loading with the angular router. The idea","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/#breadcrumblist"},"author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"creator":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"datePublished":"2018-03-27T18:40:00+02:00","dateModified":"2020-05-27T18:41:19+02:00"},{"@type":"WebSite","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website","url":"https:\/\/celilsemi.erkiner.com\/blog\/","name":"Celilsemi Sam Erkiner","description":"Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Celilsemi Sam Erkiner - Blog","og:type":"article","og:title":"Angular Lazy Load Modules","og:description":"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular's ability to delay code loading with the angular router. The idea","og:url":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/","og:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","og:image:secure_url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","article:published_time":"2018-03-27T16:40:00+00:00","article:modified_time":"2020-05-27T16:41:19+00:00","twitter:card":"summary_large_image","twitter:title":"Angular Lazy Load Modules","twitter:description":"Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular's ability to delay code loading with the angular router. The idea","twitter:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png"},"aioseo_meta_data":{"post_id":"235","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-11-14 19:48:17","updated":"2025-07-29 07:04:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/\" title=\"Engineering\">Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/\" title=\"Software Engineering\">Software Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/\" title=\"Front End Engineering\">Front End Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tAngular Lazy Load Modules\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/celilsemi.erkiner.com\/blog\/"},{"label":"Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/"},{"label":"Software Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/"},{"label":"Front End Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/"},{"label":"Angular Lazy Load Modules","link":"https:\/\/celilsemi.erkiner.com\/blog\/angular-lazy-load-modules-2\/"}],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":1,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}