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