Error in navigation

Ionic Framework ionic-v3
1

Hi

I am facing one trouble with my code where i am pushing the page 1 to page 2. But its always giving me invalid link.

I am attaching my home.ts coding.

------------------- home.ts code
import { Component } from ‘@angular/core’;
import { NavController, Platform, ActionSheet, ActionSheetController } from ‘ionic-angular’;
import {Aboutus} from ‘…/aboutus/aboutus’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
aboutus = Aboutus;

constructor(
public navCtrl: NavController,
public actionsheetCtrl:ActionSheetController,
public platform: Platform,

) {}

openMenu(){ // function of open menu
let actionSheet = this.actionsheetCtrl.create({
title: ‘Albums’,
cssClass: ‘action-sheets-basic-page’,
buttons: [
{
text: ‘Delete’,
role: ‘destructive’,
icon: !this.platform.is(‘ios’) ? ‘trash’ : null,
handler: () => {
//console.log(‘Delete clicked’);
//alert(“Deleted click”);
this.navCtrl.push(‘aboutus’);
}
},
{
text: ‘Share’,
icon: !this.platform.is(‘ios’) ? ‘share’ : null,
handler: () => {
console.log(‘Share clicked’);
}
},
{
text: ‘Play’,
icon: !this.platform.is(‘ios’) ? ‘arrow-dropright-circle’ : null,
handler: () => {
console.log(‘Play clicked’);
}
},
{
text: ‘Favorite’,
icon: !this.platform.is(‘ios’) ? ‘heart-outline’ : null,
handler: () => {
console.log(‘Favorite clicked’);
}
},
{
text: ‘Cancel’,
role: ‘cancel’, // will always sort to be on the bottom
icon: !this.platform.is(‘ios’) ? ‘close’ : null,
handler: () => {
console.log(‘Cancel clicked’);
}
}
]
});
actionSheet.present();
}

}

aboutus.ts file
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

@Component({
selector: ‘page-aboutus’,
templateUrl: ‘aboutus.html’
})
export class Aboutus {

constructor(public navCtrl: NavController) {

}

}

i am not to sure where the error is coming in this.

Regards
Saju

2

this.navCtrl.push('aboutus'); should be this.navCtrl.push(Aboutus);

3

let me review it …

4

yes correct small issue :slight_smile: but i tried it that same way… no idea cache issues was there. yes its working fine.

a quick question if a application having dozens of files then how we will mention this in a app.modules.ts. Suppose i am having 150 pages of app then how we will handle that in a app.module.ts

@NgModule({
declarations: [
MyApp,
HomePage,
Aboutus
],

imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
Aboutus
],

5

Usually we are doing this by lazy loading.
Here are two blog posts explaining how it works:
https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/
https://blog.ionicframework.com/ionic-and-lazy-loading-pt-2/

Every page gets its own module.

Another way is creating a file with an array containing all pages. then just insert that array in app.module.ts via spread operator.

6

thanx nexi let me work it in that way and check it.