{"id":1790,"date":"2017-04-28T15:42:47","date_gmt":"2017-04-28T15:42:47","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1790"},"modified":"2020-09-22T20:56:37","modified_gmt":"2020-09-22T20:56:37","slug":"ionic-and-lazy-loading-pt-1","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-and-lazy-loading-pt-1","title":{"rendered":"Ionic and Lazy Loading Pt 1"},"content":{"rendered":"

Hi there folks! When we were working on release 3.0.0, our main goal was to add lazy loading to the framework and make it as easy as possible. While we are still labeling lazy loading as a beta\/non-default<\/em> setting, many developers who are adding lazy loading to their apps are asking question regarding best practices and examples. I thought this warranted a post on the subject to dive how to set up an app for lazy loading.<\/p>\n

<\/p>\n

\n Note: the approach to lazy loading here is for version 3.0.0 and up. Since lazy loading is still beta\/experimental, the details of this may change in the future.\n<\/p><\/blockquote>\n

The main module<\/h3>\n

Lazy loading sounds like a complicated process, but actually is very straight forward. Conceptually, we’re taking one segment of code, a chunk, and loading it on demand as the app requests it. This is a very framework agnostic take on things, and the finer details here come in the form of NgModules<\/code> for Ionic apps. NgModules<\/code> are the way we can organize our app’s pages, and separate them out into different chunks.<\/p>\n

<\/p>\n

Let’s take this one piece at a time and use a blank starter app to get our bearings.<\/p>\n

ionic start lazyLoadingBlank blank\ncd lazyLoadingBlank\n<\/code><\/pre>\n
Now if we open our src\/app\/app.module.ts<\/code> file, we can inspect the default NgModule<\/code>:<\/p>\n
import { MyApp } from '.\/app.component';\nimport { HomePage } from '..\/pages\/home\/home';\n@NgModule({\n  declarations: [MyApp, HomePage],\n  imports: [ ... ],\n  bootstrap: [IonicApp],\n  entryComponents: [MyApp, HomePage],\n  providers: [ ... ]\n})\nexport class AppModule {}\n<\/code><\/pre>\n
We can see here that we’re importing the MyApp<\/code> component and the HomePage<\/code> component. Now we want to remove the HomePage<\/code> component from this module, and load it only when we need it. So we can remove the HomePage<\/code> reference in declarations<\/code> and entryComponents<\/code>, as well as the import statement.<\/p>\n
So how can we have HomePage<\/code> lazily loaded? We can provide it with it’s own NgModule<\/code> which will encapsulate everything that the component needs to function.<\/p>\n
Let’s create a new file src\/pages\/home\/home.module.ts<\/code> and scaffold it out.<\/p>\n
import { NgModule } from '@angular\/core';\nimport { IonicPageModule } from 'ionic-angular';\nimport { HomePage } from '.\/home';\n@NgModule({\n  declarations: [HomePage],\n  imports: [IonicPageModule.forChild(HomePage)],\n})\nexport class HomePageModule { }\n<\/code><\/pre>\n
There’s not a lot going on here, but IonicPageModule<\/code> is probably something new. Similar to IonicModule<\/code> in the main app.module.ts<\/code>, this tells Ionic what component it should load or provide for this chunk. We can export an empty class and wrap up our module. The last part we need to do now is decorate our HomePage<\/code> component.<\/p>\n
In src\/pages\/home\/home.ts<\/code> let’s add the @IonicPage<\/code> decorator.<\/p>\n
<br \/>import { Component } from '@angular\/core';\nimport { IonicPage } from 'ionic-angular';\n@IonicPage()\n@Component(... )\nexport class HomePage { ... }\n<\/code><\/pre>\n
This IonicPage<\/code> decorator is how Ionic generates the proper mappings and URL slugs for your app at build time. IonicPage<\/code> has a few options<\/a> you can pass to it, but for now we won’t worry about them. All we need to know is that when we want to navigate or reference this component in our code, we can pass the string HomePage<\/code> instead of a reference to the class directly.<\/p>\n
Speaking of, we have the last bit of cleaning up to do. In src\/app\/app.component.ts<\/code> we have an import statement and reference to HomePage<\/code>. Let’s remove the import statement, and then for rootPage<\/code>, we can set it to 'HomePage'<\/code>.<\/p>\n
rootPage:any = 'HomePage';\n<\/code><\/pre>\n
Congratulations! You have now gone through the process of lazy loading the Home page!<\/p>\n
Ok, so at a basic level, there’s not a whole lot going on here, it’s mostly centered around organizing your code, and creating NgModule<\/code>s for the pages you want lazy loaded, and adding the @IonicPage<\/code> decorator to the component.<\/p>\n
I’ve put together some examples on how this can work for something a bit more complicated, like a Tabs based app.<\/p>\n