Ionic Lazy loading Error: Uncaught (in promise): invalid link SecondPage

Question

I am getting Uncaught (in promise): invalid link SecondPage error when I try to navigate to Second page lazily. Here is my code:

NavigateToSecondPage(): void{
    this.navCtrl.push('SecondPage');
}

Second page is in Ionic page generated using ionic-cli. Here is what the ts file looks like.

@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
})
export class SecondPage { 

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
}

I am getting the following error:

What am I doing wrong?

Answer 1

You should create the second-module.ts and update second.ts adding @IonicPage()

second-module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SecondPage } from './second';

@NgModule({
   declarations: [
    SecondDetailPage,
   ],
   imports: [
    IonicPageModule.forChild(SecondPage),
   ],
   exports: [
     SecondPage
  ]
})
export class SecondPageModule {}

Answer 2

I too had too go through this and you have to keep two things in mind to use ionic lazy loading it needs the @IonicPage({}) decorator and the relative module.ts file. Its mentioned in ionic lazy loading blog the IonicPage decorator is how Ionic generates the proper mappings and URL slugs for your app at build time so its mandatory to add this decorator

So add the @IonicPage decorator in second.ts:

import { IonicPage } from 'ionic-angular';

@IonicPage({})
@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
})
export class SecondPage { 
  constructor(public navCtrl: NavController, public navParams: 
  NavParams) {
  }
}

and add second-module.ts to the second page folder/component:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SecondPage } from './second';

@NgModule({
  declarations: [
    SecondPage,
  ],
  imports: [
    IonicPageModule.forChild(SecondPage),
  ],
  exports: [
    SecondPage
  ]
})
export class SecondPageModule {}