{"id":1799,"date":"2017-05-11T17:58:45","date_gmt":"2017-05-11T17:58:45","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1799"},"modified":"2017-05-11T17:58:45","modified_gmt":"2017-05-11T17:58:45","slug":"ionic-and-lazy-loading-pt-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2","title":{"rendered":"Ionic and Lazy Loading Pt 2"},"content":{"rendered":"<p><center><em>Some kittens organizing themselves into formatted modules<\/em><\/center><\/p>\n<p>Howdy folks! In our <a href=\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-1\/\">last blog post<\/a> we discussed how to configure an app to lazy load pages. In this post we\u2019ll discuss how to better organize the rest of our app to operate with lazy loading; specifically the UI Components, Directives and Pipes.<\/p>\n<p><!--more--><\/p>\n<h3>Setting the stage<\/h3>\n<p>Imagine we have an <a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/\">example music app<\/a> with these use cases:<\/p>\n<ul>\n<li>Lazy loaded: HomePage and DetailPage<\/li>\n<li>Two components for rendering our music data<\/li>\n<li>Custom pipe to convert milliseconds to minutes:seconds<\/li>\n<li>Two directives used in the components<\/li>\n<\/ul>\n<p>I&#8217;ve created <a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/\">this sample app<\/a> we&#8217;ll use as reference in this post, it is available on Github (just switch branches to see the different options we discuss below).<\/p>\n<p><em>Keep in mind, everyone\u2019s needs are unique, so we recommend reviewing the options presented in this post with your team to determine what works best for your app.<\/em><\/p>\n<p>Generally, we recommend following one of two different approaches when developing your app:<\/p>\n<ul>\n<li>Option 1 &#8211; Encapsulated Modules<\/li>\n<li>Option 2 &#8211; Shared Common Modules<\/li>\n<\/ul>\n<p>Each approach has unique benefits and drawbacks, let&#8217;s see how they differ in greater detail&#8230;<\/p>\n<h3>Option 1: Encapsulated Modules<\/h3>\n<p>Wrapping all your custom components and pipes into distinct modules (one for components and one for pipes)<\/p>\n<p>With this approach every component, pipe, and directive available to your app can become its own self-contained module. Using the <a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/\">master branch of our sample app<\/a>, here&#8217;s how I structured things:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1052\" height=\"1388\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM.png\"\nclass=\"aligncenter size-full wp-image-1800 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM.png 1052w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-227x300.png 227w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-768x1013.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-776x1024.png 776w\" data-sizes=\"auto, (max-width: 1052px) 100vw, 1052px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1052px; --smush-placeholder-aspect-ratio: 1052\/1388;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1052\" height=\"1388\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM.png\"\nclass=\"aligncenter size-full wp-image-1800\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM.png 1052w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-227x300.png 227w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-768x1013.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-2.47.22-PM-776x1024.png 776w\" sizes=\"auto, (max-width: 1052px) 100vw, 1052px\" \/><\/noscript><\/a><\/p>\n<p>Within the code of our <code>music-card<\/code> and <code>music-item<\/code> components (below), we can see how each of these components exports themselves as encapsulated modules.<\/p>\n<pre><code class=\"ts\">\/\/ music-card module\nimport { NgModule } from &#039;@angular\/core&#039;;\nimport { IonicModule } from &#039;ionic-angular&#039;;\nimport { MusicCardComponent } from &#039;.\/music-card&#039;;\nimport { MsToMinsPipeModule } from &#039;..\/..\/pipes\/ms-to-mins\/ms-to-mins.module&#039;\n@NgModule({\n  declarations: [MusicCardComponent],\n  imports: [IonicModule, MsToMinsPipeModule],\n  exports: [MusicCardComponent]\n})\nexport class MusicCardComponentModule { }\n<\/code><\/pre>\n<pre><code class=\"ts\">\/\/music-item module\nimport { NgModule } from &#039;@angular\/core&#039;;\nimport { IonicModule } from &#039;ionic-angular&#039;;\nimport { MusicItemComponent } from &#039;.\/music-item&#039;;\nimport { MsToMinsPipeModule } from &#039;..\/..\/pipes\/ms-to-mins\/ms-to-mins.module&#039;\n@NgModule({\n  declarations: [MusicItemComponent],\n  imports: [IonicModule, MsToMinsPipeModule],\n  exports: [MusicItemComponent]\n})\nexport class MusicItemComponentModule { }\n<\/code><\/pre>\n<p>When we import these modules into their respected pages, we can be certain the compiled chunk will contain the minimum required code it needs to function properly.<\/p>\n<p>Now we can also apply the same concepts to splitting out our directives and pipes. Isolating them into their own modules will ensure that we&#8217;re not sending any unnecessary code to our chunks.<\/p>\n<pre><code class=\"ts\">import { NgModule } from &#039;@angular\/core&#039;;\nimport { LogElmDirective  } from &#039;.\/log-elm&#039;;\n@NgModule({\n  declarations: [LogElmDirective],\n  exports: [LogElmDirective]\n})\nexport class LogElmDirectiveModule { }\n<\/code><\/pre>\n<pre><code class=\"ts\">import { NgModule } from &#039;@angular\/core&#039;;\nimport { LogEvntDirective  } from &#039;.\/log-evnt&#039;;\n@NgModule({\n  declarations: [LogEvntDirective],\n  exports: [LogEvntDirective]\n})\nexport class LogEvntDirectiveModule { }\n<\/code><\/pre>\n<p>The down side of this approach is that there&#8217;s more to keep track of as your app grows.<br \/>\nConsider an app with many pages and many components\/directives\/pipes. As you&#8217;re working on things, you&#8217;ll need to constantly make sure the correct modules are imported in order to use your custom components. Depending on how many of these modules you need in your page, this could be one import, or 30 imports.<\/p>\n<p>There&#8217;s also a bit more boilerplate code for each of these individual modules. While most of that boilerplate code is 6-10 lines, it can be quite repetitive to have constantly go through the ritual of creating a new module every time a new feature is added.<\/p>\n<h3>Option 2: Shared Common Modules<\/h3>\n<p>Creating a shared module for each component and pipe your app may have.<\/p>\n<p>With this approach, instead of splitting things into their own isolated module, everything gets bundled into a shared <code>components.module.ts<\/code> The same would go for any pipes we have or any directives we might have as well. A real world example of this would be the <a href=\"https:\/\/github.com\/urish\/angular2-moment\/blob\/master\/src\/moment.module.ts\">angular-moment package<\/a> from Uri Shaked.<\/p>\n<p>Using the <a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/tree\/common-modules\">common-mmodules branch of our sample app<\/a>, here&#8217;s how I structured things:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1064\" height=\"1260\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM.png\" alt=\"\" class=\"aligncenter size-full wp-image-1801 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM.png 1064w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-253x300.png 253w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-768x909.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-865x1024.png 865w\" data-sizes=\"auto, (max-width: 1064px) 100vw, 1064px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1064px; --smush-placeholder-aspect-ratio: 1064\/1260;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1064\" height=\"1260\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM.png\" alt=\"\" class=\"aligncenter size-full wp-image-1801\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM.png 1064w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-253x300.png 253w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-768x909.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-02-at-3.24.43-PM-865x1024.png 865w\" sizes=\"auto, (max-width: 1064px) 100vw, 1064px\" \/><\/noscript><\/a><\/p>\n<p>The logic here is that instead of micro-optimizing your app and creating multiple sub-modules, a single shared module  contains all the components, pipes. and directives your app needs.<br \/>\nFor instance, our <code>music-item<\/code> and <code>music-card<\/code> components are not overly complicated components.<br \/>\nInstead of splitting them out, we could package them into a shared <code>components.moudle.ts<\/code> file:<\/p>\n<pre><code class=\"ts\">\/\/ components.moudle.ts\n\/\/ Note that we also need to provide the\n\/\/ shared PipesModule sice the components use it.\n\nimport { NgModule } from &#039;@angular\/core&#039;;\nimport { MusicCardComponent } from &#039;.\/music-card\/music-card&#039;\nimport { MusicItemComponent } from &#039;.\/music-item\/music-item&#039;\nimport {IonicModule}  from &#039;ionic-angular&#039;\nimport { PipesModule } from &#039;..\/pipes\/pipes.module&#039;\n@NgModule({\n  declarations: [MusicCardComponent, MusicItemComponent],\n  imports: [PipesModule, IonicModule],\n  exports: [MusicCardComponent, MusicItemComponent]\n})\nexport class ComponentsModule { }\n<\/code><\/pre>\n<p>Doing this means anytime we want to use either <code>music-card<\/code> or <code>music-item<\/code>, they&#8217;re automatically available in our chunk. The same concept can be applied to directives and pipes.<\/p>\n<p>For our directives:<\/p>\n<pre><code class=\"ts\">import { NgModule } from &#039;@angular\/core&#039;;\nimport { LogElmDirective } from &#039;.\/log-elm\/log-elm&#039;\nimport { LogEvntDirective } from &#039;.\/log-evnt\/log-evnt&#039;\n\n@NgModule({\n  declarations: [LogElmDirective, LogEvntDirective],\n  exports: [LogElmDirective, LogEvntDirective]\n})\nexport class DirectivesModule {}\n<\/code><\/pre>\n<p>Creating shared <code>directives.module.ts<\/code> and <code>pipes.module.ts<\/code> will allow you to import these top level modules once, and have all the functionally available.<\/p>\n<p>Of course, this example is not overly complex, but illustrates how developers can apply this pattern.<\/p>\n<p>The down side of the shared common module approach is code is being sent to that chunk regardless if it&#8217;s being used. So while we&#8217;re using these two components in a single page, any additional components we&#8217;re not using still cost us in the price of chunk size. This can be a concern if your app has a lot of components, especially if you&#8217;re shipping a web app where everything is sent over the wire. Loading the code for 21-40 components when you only need 4-5 is a big &#8220;no-no&#8221;.<\/p>\n<p>The key takeaway of these two options for developing components, pipes, and directives for use with lazy loading are:<\/p>\n<p><em>Option 1<\/em><br \/>\nPro: Easier separation and encapsulation<br \/>\nCon: Additional boilerplate code for each module<\/p>\n<p><em>Option 2<\/em><br \/>\nPro: Easier to manage multiple components\/directives\/pipes. They all come from the same shared place.<br \/>\nCon: Extra code is being sent over when it&#8217;s not needed. Final chunks can be larger than needed.<\/p>\n<h3>So where can you go from here?<\/h3>\n<p>There are pros\/cons to both of these approaches. Maybe your app is smaller, and wouldn&#8217;t benefit from an overly modular approach, then the shared common module solution (option 2, shared common modules) may be of better benefit. Alternatively, your app might contains large quantities of pages, components, directives, and pipes; in this situation you would want to consider making your app more modular (option 1, encapsulated modules).<\/p>\n<p>What we\u2019ve discussed here is only 2 options that we have landed on, but this doesn\u2019t mean you\u2019re limited to just that. You can feel free to experiment and find a balance that fits your team and your app. Whatever approach you land on, the goal will be the same, send as little code as possible per chunk.<\/p>\n<p>And now that we&#8217;ve addressed code structure&#8230;what else is left?<\/p>\n<p>Since our goal is to send as little code as possible per chunk to the user, and we\u2019ve already split <em>our<\/em> code into smaller module, the only code left to look at is our libraries. We\u2019ll focus on the some of the most commonly used libraries people include in their apps and some alternatives that are much more mobile friendly.<\/p>\n<p>Links for the sample app:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/\">Option 1: Encapsulated Modules<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/mhartington\/lazyLoad2-components\/tree\/common-modules\">Option 2: Shared Common Modules<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Some kittens organizing themselves into formatted modules Howdy folks! In our last blog post we discussed how to configure an app to lazy load pages. In this post we\u2019ll discuss how to better organize the rest of our app to operate with lazy loading; specifically the UI Components, Directives and Pipes.<\/p>\n","protected":false},"author":5,"featured_media":1802,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[60,3],"class_list":["post-1799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-angular","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic and Lazy Loading Pt 2 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic and Lazy Loading Pt 2\" \/>\n<meta property=\"og:description\" content=\"Some kittens organizing themselves into formatted modules Howdy folks! In our last blog post we discussed how to configure an app to lazy load pages. In this post we\u2019ll discuss how to better organize the rest of our app to operate with lazy loading; specifically the UI Components, Directives and Pipes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-11T17:58:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"281\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Ionic and Lazy Loading Pt 2\",\"datePublished\":\"2017-05-11T17:58:45+00:00\",\"dateModified\":\"2017-05-11T17:58:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\"},\"wordCount\":1027,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif\",\"keywords\":[\"Angular\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\",\"name\":\"Ionic and Lazy Loading Pt 2 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif\",\"datePublished\":\"2017-05-11T17:58:45+00:00\",\"dateModified\":\"2017-05-11T17:58:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif\",\"width\":500,\"height\":281,\"caption\":\"Some kittens organizing themselves into formatted modules\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic and Lazy Loading Pt 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic and Lazy Loading Pt 2 - Ionic Blog","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:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2","og_locale":"en_US","og_type":"article","og_title":"Ionic and Lazy Loading Pt 2","og_description":"Some kittens organizing themselves into formatted modules Howdy folks! In our last blog post we discussed how to configure an app to lazy load pages. In this post we\u2019ll discuss how to better organize the rest of our app to operate with lazy loading; specifically the UI Components, Directives and Pipes.","og_url":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2","og_site_name":"Ionic Blog","article_published_time":"2017-05-11T17:58:45+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","width":500,"height":281,"type":"image\/gif"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Ionic and Lazy Loading Pt 2","datePublished":"2017-05-11T17:58:45+00:00","dateModified":"2017-05-11T17:58:45+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2"},"wordCount":1027,"commentCount":18,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","keywords":["Angular","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2","url":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2","name":"Ionic and Lazy Loading Pt 2 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","datePublished":"2017-05-11T17:58:45+00:00","dateModified":"2017-05-11T17:58:45+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","width":500,"height":281,"caption":"Some kittens organizing themselves into formatted modules"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic and Lazy Loading Pt 2"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/EjyED.gif","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1799"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1802"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}