Ionic 2 lazy boot components

Question

My application is really big and has 30 components and pages, I load them all into my app.module.ts, and sometimes the application slows down slowly. I wonder if he has anything to do.

My question is: What is the correct way for lazy loading components to use angular 2 functions (more modules) with Ionic 2?

Answer 1

Since Ionic 3, you can use lazy download components.

Just create a new module for each component / page.

Here is an example of what the HomePage module should look like:

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
  declarations: [MyApp, HomePage],
  imports: [ ... ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [ ... ]
})
export class AppModule {}

After creating the module, add @IonicPage()to the component:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component(... )
export class HomePage { ... }

/ import:

rootPage:any = 'HomePage';

, Ionic Lazy Loading blog post.