CODEWITHSUNDEEP
ionic2
TheUnreal
TheUnreal

Reputation: 24462

Ionic 2 lazy loading components

My app is really big and has like 30 components and pages, I load all of them in my app.module.ts and sometimes the application turn slow. I wonder if it has anything to do it.

My question: What's the correct way to lazy load components and use angular 2 features (more modules) with Ionic 2?

Upvotes: 4

Views: 3028

Answers (1)

TheUnreal
TheUnreal

Reputation: 24462

Since Ionic 3, you can lazy load components.

Simply, create a new module for each component/page.

Here's an example of how a module of the HomePage 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, attach @IonicPage() to the component:

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

Now you can use your page/component as a string without using the import statement:

rootPage:any = 'HomePage';

for more descriptibe answer, check out this Ionic Lazy Loading blog post.

Upvotes: 1

Related Questions