How to setroot to my main application with tabs properly in ionic 3?

Question

Hi guys i jsut starting a project using this command "ionic start helloWorld tabs" it generate tabbed project, then i add a button to push to a new page which is i have a button i want to get back to my main application, here is how i program the new page button

newpage.ts

  addItem(item: Item) {
    this.shopping.addItem(item).then(ref =>{
      this.navCtrl.setRoot('TabsPage', {key : ref.key});
    })
  }

after i save an item, i would like to get back to my main apps, i do the setRoot to my TabsPage, but i showing me this error

invalid link: TabsPage

here is my tabs.ts

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

what i missed here? i should nav to tabspage class right?

UPDATE after i update my code with @Yerkon answer for option two, i got these error :

Error: Uncaught (in promise): Error: Type TabsPage is part of the declarations of 2 modules: AppModule and TabsPageModule! Please consider moving TabsPage to a higher module that imports AppModule and TabsPageModule. You can also create a new NgModule that exports and includes TabsPage then import that NgModule in AppModule and TabsPageModule. Error: Type TabsPage is part of the declarations of 2 modules: AppModule and TabsPageModule! Please consider moving TabsPage to a higher module that imports AppModule and TabsPageModule. You can also create a new NgModule that exports and includes TabsPage then import that NgModule in AppModule and TabsPageModule.

it said i have to move my tabpagemodule higher, is it normal to do this? or there is something i missed?

add a button to push to a new page why not just pop from newPage? isnt newPage pushed onto one one of the tabbed pages? — Suraj Rao

Yerkon Yerkon · Accepted Answer · 2018-05-14T06:01:52

invalid link: TabsPage

This error thrown, because TabsPage isn't registered in module. There are two ways to register:

If page is eager loaded:

app.module.ts:

@NgModule({
  declarations: [
    ConferenceApp,
    AboutPage,
    AccountPage,
    LoginPage,
    MapPage,
    PopoverPage,
    SchedulePage,
    ScheduleFilterPage,
    SessionDetailPage,
    SignupPage,
    SpeakerDetailPage,
    SpeakerListPage,
    TabsPage,
    TutorialPage,
    SupportPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(ConferenceApp, {}, {
      links: [
        { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
         ...
      ]
    }),
    IonicStorageModule.forRoot()
  ],
...

If page will lazy load. Here for every page you create module. Tip: Using ionic CLI no need to create page/page.modules manually. Simply run: ionic g page TabsPage. Result should be similar to:

tabs.module.ts:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { IonicPageModule } from 'ionic-angular';

import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(TabsPage),

  ],
  exports: [
    TabsPage
  ]
})
export class TabsPageModule { }

tabs.ts:

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = Tab1Root;
  tab2Root: any = Tab2Root;
  tab3Root: any = Tab3Root;
...

How to setroot to my main application with tabs properly in ionic 3?

1 Answers