Example with Explanation
- Now, our app.module.ts file has HomePage introduced and proclaim in the declarations as well as the entryComponents
@NgModule({
declarations: [
MyApp,
HomePage ],
entryComponents: [
MyApp,
HomePage], })
- The goal is to reduce this so we're only loading the main app.component.ts, and lazy-loading the HomePage component everywhere else.
- So we'll remove HomePage from the declarations, entryComponents, and remove the import statement as well.
- So create a new file, called home.module.ts, similar to app.module.ts
import { NgModule } from '@angular/core';
import { HomePage} from './home';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }
- Now, in our home.ts file, we can update the @IonicPage decorator to the HomePage class.
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({ })
export class HomePage { }
- Since our HomePage component is now lazy loaded, we do not want to introduce it directly and remark it anywhere. As an Alternative, we can pass a string that matches up with the component.
//Before :-
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html‘ })
export class MyApp {
rootPage:any = HomePage;
}
//After:-
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = 'HomePage';
}
- The string is actually a citation of the name property of the @IonicPage decorator, which defaults to the class name as a string. If we change that name property to something else, we'll also need to update the remark and we use it elsewhere.
//home.ts
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage({
name: 'home'
})
@Component({ })
export class HomePage { }
// app.component.ts
export class MyApp {
rootPage:any = 'home';
}