How to navigate page from side menu page directly

Ionic Framework ionic-v3
1

I am try to navigate page from login. When I successfully logged in then I need to enter page1. Login page is different from the side menu pages. I set login page as root page. If I successfully logged in it cannot enter into the page1. It shows cannot find module “…/pages/page1/page1”.

My code is

 import { NavController, NavParams } from 'ionic-angular';
 import { Component} from '@angular/core';
 import { Page1 } from '../pages/page1/page1';


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

 constructor(public nav: NavController) {

 }
 move(){

 this.nav.push(Page1);
 }

 }

as well I tried to navigate page from page1 to login as it is. it also give same error message.

when I added login into side menu items then using side menu I can easily transfer the pages.

Can you please help me, How to push page from side menu page to non side menu page directly.

Thank you for the answer.

2

How is your folder structure? I guess or your import is wrong (i.e …/pages/page1/page1 could not be found) or you actually want to set a new root page instead of pushing your app to a new page. Or did you forget to import your page 1 module into your app.module file? Questions questions questions … :wink:

3

Thank you for interact.

My project code is

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

import {LoginPage} from '../pages/login/login';


@Component({
 templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;

rootPage: any = LoginPage;

pages: Array<{title: string, component: any}>;

 constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Page one', component: Page1 },
  { title: 'Page two', component: Page2 }
  ];

  }

    initializeApp() {
    this.platform.ready().then(() => {
    this.statusBar.styleDefault();
    this.splashScreen.hide();
    });
    }

   openPage(page) {
   this.nav.setRoot(page.component);
   }
   }

app.html

 <ion-menu [content]="content">
 <ion-header>
 <ion-toolbar>
   <ion-title>Menu</ion-title>
 </ion-toolbar>
 </ion-header>

 <ion-content>
<ion-list>
  <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    {{p.title}}
  </button>
</ion-list>
</ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.module.ts

 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 import { Page1 } from '../pages/page1/page1';
 import { Page2 } from '../pages/page2/page2';
 import { LoginPage} from '../pages/login/login';

 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';

 @NgModule({
 declarations: [
MyApp,
Page1,
Page2,
LoginPage
 ],
 imports: [

  IonicModule.forRoot(MyApp)
 ],
 bootstrap: [IonicApp],
entryComponents: [
MyApp,
Page1,
Page2,
LoginPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

login.html

 <ion-header>
  <ion-toolbar>
   <ion-title>Pages</ion-title>
 </ion-toolbar>
 </ion-header>


<ion-content padding>

<button ion-button block (click)="move()"> click </button>

 </ion-content>

page1.ts

import { NavController} from 'ionic-angular';

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

import { LoginPage } from '../pages/login/login';

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

constructor(public nav: NavController) {

 }
 }

Thank you.