{"id":71728,"date":"2020-01-10T16:24:19","date_gmt":"2020-01-10T10:54:19","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71728"},"modified":"2024-04-12T14:22:40","modified_gmt":"2024-04-12T08:52:40","slug":"lazy-loading-feature-modules","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/","title":{"rendered":"Lazy Loading Feature Modules"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n\n\n<p>There are three main steps to setting up a lazy loaded feature module:<\/p>\n<ul>\n<li>Create the feature module.<\/li>\n<li>Create the feature module\u2019s routing module.<\/li>\n<li>Configure the routes.<\/li>\n<\/ul>\n<p><strong>Set up an app<\/strong><\/p>\n<p>If you don\u2019t already have an app, you can follow the steps below to create one with the CLI. If you do already have an app, skip to Configure the routes. Enter the following command where customer-app is the name of your app:<\/p>\n<p>ng new customer-app &#8211;routing<\/p>\n<p>This creates an app called customer-app and the &#8211;routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module. Navigate into the project by issuing the command cd customer-app.<\/p>\n<p><strong>Create a feature module with routing<\/strong><\/p>\n<p>Next, you\u2019ll need a feature module to route to. To make one, enter the following command at the terminal window prompt where customers is the name of the module:<\/p>\n<p>ng generate module customers &#8211;routing<\/p>\n<p>This creates a customers folder with two files inside; CustomersModule and CustomersRoutingModule. CustomersModule will act as the gatekeeper for anything that concerns customers. CustomersRoutingModule will handle any customer-related routing. This keeps the app\u2019s structure organized as the app grows and allows you to reuse this module while easily keeping its routing intact.<\/p>\n<p>The CLI imports the CustomersRoutingModule into the CustomersModule by adding a JavaScript import statement at the top of the file and adding CustomersRoutingModule to the @NgModule imports array.<\/p>\n<p><strong>Add a component to the feature module<\/strong><\/p>\n<p>In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads CustomersModule. At the command line, enter the following:<\/p>\n<p>ng generate component customers\/customer-list<\/p>\n<p>This creates a folder inside of customers called customer-list with the four files that make up the component. Just like with the routing module, the CLI imports the CustomerListComponent into the CustomersModule.<\/p>\n<p><strong>Add another feature module<\/strong><\/p>\n<p>For another place to route to, create a second feature module with routing:<\/p>\n<p>ng generate module orders &#8211;routing<\/p>\n<p>This makes a new folder called orders containing an OrdersModule and an OrdersRoutingModule. Now, just like with the CustomersModule, give it some content:<\/p>\n<p>ng generate component orders\/order-list<\/p>\n<p>Set up the UI<\/p>\n<p>Though you can type the URL into the address bar, a nav is easier for the user and more common. Replace the default placeholder markup in app.component.html with a custom nav so you can easily navigate to your modules in the browser:<\/p>\n<p>&nbsp;<\/p>\n<p><u>src\/app\/app.component.html<\/u><\/p>\n<p>&lt;h1&gt;<\/p>\n<p>{{title}}<\/p>\n<p>&lt;\/h1&gt;<\/p>\n<p>&lt;button routerLink=&#8221;\/customers&#8221;&gt;Customers&lt;\/button&gt;<\/p>\n<p>&lt;button routerLink=&#8221;\/orders&#8221;&gt;Orders&lt;\/button&gt;<\/p>\n<p>&lt;button routerLink=&#8221;&#8221;&gt;Home&lt;\/button&gt;<\/p>\n<p>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/p>\n<p>To see your app in the browser so far, enter the following command in the terminal window:<\/p>\n<p>ng serve<\/p>\n<p>Then go to localhost:4200 where you should see \u201capp works!\u201d and three buttons.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-138123\" src=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg\" alt=\"\" width=\"321\" height=\"244\"><\/p>\n<p>To make the buttons work, you need to configure the routing modules.<\/p>\n<h3><strong>Configure the routes<\/strong><\/h3>\n<p>The two feature modules, OrdersModule and CustomersModule, have to be wired up to the AppRoutingModule so the router knows about them. The structure is as follows:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-138124\" src=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/approuting.jpg\" alt=\"\" width=\"545\" height=\"458\"><\/p>\n<p class=\"VSKILLbodytext\">Each feature module acts as a doorway via the router. In the AppRoutingModule, you configure the routes to the feature modules, in this case OrdersModule and CustomersModule. This way, the router knows to go to the feature module. The feature module then connects the AppRoutingModule to the CustomersRoutingModule or the OrdersRoutingModule. Those routing modules tell the router where to go to load relevant components.<\/p>\n<p>&nbsp;<\/p>\n\n\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Go back to Tutorial There are three main steps to setting up a lazy loaded feature module: Create the feature module. Create the feature module\u2019s routing module. Configure the routes. Set up an app If you don\u2019t already have an app, you can follow the steps below to create one with the CLI. If you&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[8337],"class_list":["post-71728","page","type-page","status-publish","hentry","category-angular-7","tag-lazy-loading-feature-modules"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lazy Loading Feature Modules - Tutorial<\/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:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading Feature Modules - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial There are three main steps to setting up a lazy loaded feature module: Create the feature module. Create the feature module\u2019s routing module. Configure the routes. Set up an app If you don\u2019t already have an app, you can follow the steps below to create one with the CLI. If you...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/\",\"name\":\"Lazy Loading Feature Modules - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg\",\"datePublished\":\"2020-01-10T10:54:19+00:00\",\"dateModified\":\"2024-04-12T08:52:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lazy Loading Feature Modules\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy Loading Feature Modules - Tutorial","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:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/","og_locale":"en_US","og_type":"article","og_title":"Lazy Loading Feature Modules - Tutorial","og_description":"Go back to Tutorial There are three main steps to setting up a lazy loaded feature module: Create the feature module. Create the feature module\u2019s routing module. Configure the routes. Set up an app If you don\u2019t already have an app, you can follow the steps below to create one with the CLI. If you...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:40+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/","name":"Lazy Loading Feature Modules - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg","datePublished":"2020-01-10T10:54:19+00:00","dateModified":"2024-04-12T08:52:40+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#primaryimage","url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg","contentUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2019\/06\/app-works.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/lazy-loading-feature-modules\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Lazy Loading Feature Modules"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71728"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71728\/revisions"}],"predecessor-version":[{"id":87869,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71728\/revisions\/87869"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}