Ionic Lazy loading错误：未捕获（在承诺中）：无效链接SecondPage

Question

我得到了Uncaught (in promise): invalid link SecondPage当我尝试懒洋洋地导航到第二页时， Uncaught (in promise): invalid link SecondPage错误。 这是我的代码：

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

第二页是使用ionic-cli生成的离子页面。 这是ts文件的样子。

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

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

我收到以下错误：

我究竟做错了什么？

Answer 1

你应该创建第二个module.ts并更新second.ts添加@IonicPage（）

第二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

我也经历了这个，你必须记住两件事情来使用离子延迟加载它需要@IonicPage（{}）装饰器和相关的module.ts文件。 它在离子延迟加载博客中提到IonicPage装饰器是Ionic如何在构建时为你的应用程序生成正确的映射和URL slug所以它必须添加这个装饰器

所以在second.ts中添加@IonicPage装饰器：

import { IonicPage } from 'ionic-angular';

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

并将second-module.ts添加到第二个页面文件夹/组件：

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 {}