ionic3 - Didn't set nav root: invalid link: FeedbackPage

Question

I want when I clicked feedback button can go feedback page, but after I set up all, after clicked still showing tabsPage.

app.component.ts

appPages: PageInterface[] = [
    { title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
    { title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
    { title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
    { title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' }
  ];
  loggedInPages: PageInterface[] = [
    { title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
    { title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
    { title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
    { title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' },
    { title: '注销', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
  ];

The last one is the feedback button, when I click feedback button just back to tabsPage not go into feedback page.

UPDATE:

I am checking this code in app.components.ts

openPage(page: PageInterface) {
    let params = {};
        if (page.index) {
          params = { tabIndex: page.index };
        }

        if (this.nav.getActiveChildNavs().length && page.index != undefined) {
          this.nav.getActiveChildNavs()[0].select(page.index);
        } else {
          // Set the root of the nav with params if it's a tab index
          this.nav.setRoot(page.name, params).catch((err: any) => {
            console.log(`Didn't set nav root: ${err}`);
          });
        }

        if (page.logsOut === true) {
          // Give the menu time to close before changing to logged out
          this.userData.logout();
        }
  }

Is it need to change params?

app.html

<ion-menu id="loggedOutMenu" [content]="content">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>菜单</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-list-header>请登录</ion-list-header>
      <button color="wechat" style="width:40%" ion-button clear (click)= "wechatLogin()">
        <ion-icon name="minan-login-wechat"></ion-icon>
      </button>
      <button color="facebook" style="width:40%" ion-button clear (click)= "FBLogin()">
        <ion-icon name="minan-login-facebook"></ion-icon>
      </button>

      <ion-list-header>导航栏</ion-list-header>
      <button menuClose ion-item *ngFor="let p of appPages" (click)="openPage(p)">
        <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>

  </ion-content>
</ion-menu>

Answer 1

Based on your app structure, you app might be based on ionic conference starter template, what iv'e done is remove extra parameters in IonicModule.forRoot(ConferenceApp), like links array and extra objects, then do the lazy loading for your pages by Adding and importing an @IonicPage() on your components.

Before:

IonicModule.forRoot(ConferenceApp, {}, {
      links: [
        { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
        { component: SchedulePage, name: 'Schedule', segment: 'schedule' },
        { component: SessionDetailPage, name: 'SessionDetail', segment: 'sessionDetail/:sessionId' },
        { component: ScheduleFilterPage, name: 'ScheduleFilter', segment: 'scheduleFilter' },
        { component: SpeakerListPage, name: 'SpeakerList', segment: 'speakerList' },
        { component: SpeakerDetailPage, name: 'SpeakerDetail', segment: 'speakerDetail/:speakerId' },
        { component: MapPage, name: 'Map', segment: 'map' },
        { component: AboutPage, name: 'About', segment: 'about' },
        { component: TutorialPage, name: 'Tutorial', segment: 'tutorial' },
        { component: SupportPage, name: 'SupportPage', segment: 'support' },
        { component: AccountPage, name: 'AccountPage', segment: 'account' },
        { component: SignupPage, name: 'SignupPage', segment: 'signup' }
      ]

After:

IonicModule.forRoot(ConferenceApp),

login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
})
export class RequestTrainingPageModule {}

login.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { IonicPage, NavController } from 'ionic-angular';

import { UserOptions } from '../../interfaces/user-options';
import { UserData } from '../../providers/user-data';

import { TabsPage } from '../tabs-page/tabs-page';

@IonicPage()
@Component({
  selector: 'page-user',
  templateUrl: 'login.html'
})
export class LoginPage {
  login: UserOptions = { username: '', password: '' };
  submitted = false;

  constructor(public navCtrl: NavController, public userData: UserData) { }

  onLogin(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.userData.login(this.login.username);
      this.navCtrl.push(TabsPage);
    }
  }

  onSignup() {
    this.navCtrl.push('SignupPage');
  }
}

Answer 2

Feedback page doesn't have own module because I am using 'ionic generate page Feedback --no-module' to generate my Feedback page

This means you are not using lazy loading and the page is not an IonicPage.

@IonicPage()

which sets the name property as the component name by default.

This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.

And also you dont have PageModule

In your case, you will have to set the imported component/page and not the string with your NavController functions.

Do:

this.nav.setRoot(page.component, params).catch((err: any) => {
            console.log(`Didn't set nav root: ${err}`);
          });//page.component