@SeanSpotOnCreative wrote:
Hi Guys,
I hope this will be a really simple fix as i have done a lot of hunting and can’t find the answer to what is normally a really easy task.
I have created a fresh project sidemenu Ionic 3 project that come with the Home and List page as standard. I created a new page (a few pages) and tried to set the LoginPage as the root page in app.component.ts however when i run the app i simply get a blank screen.
Used
Ionic g page login.
Deletedlogin.module
Deleted@IonicPage()
Create Pages.ts file for easeexport * from './login/login';
Add to app.component and app.moduleimport {LoginPage} from '../pages/pages';
Add to app.componentrootpage: any = LoginPage;
Add Login page to declarations and entry components on app.modulesThe weird thing is i can swap homePage with List page and have that as the root page and that works fine and what stranger is i can even put a link button to push the login page on to the stack and navigate to it from the original home page!
This is what i have done so far bellow:
app.component…
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 {AccessHAndSPage,} from '../pages/pages'; import {BuildingSelectorPage} from '../pages/pages'; import {CreateEditJobPage} from '../pages/pages'; import {DimensionsPage} from '../pages/pages'; import {FastenersPage} from '../pages/pages'; import {FlashingsPage} from '../pages/pages'; import {FlatRoofPage} from '../pages/pages'; import {GuttersPage} from '../pages/pages'; import {HomePage} from '../pages/pages'; import {IssueAllocatorSelectorPage} from '../pages/pages'; import {JobSelectorPage} from '../pages/pages'; import {ListPage} from '../pages/pages'; import {LoginPage} from '../pages/pages'; import {ParapetCappingPage} from '../pages/pages'; import {PenetrationsPage} from '../pages/pages'; import {RoofLightsPage} from '../pages/pages'; import {RoofSheetsPage} from '../pages/pages'; import {TaskListPage} from '../pages/pages'; import {TerminationFillersPage} from '../pages/pages'; import {TestPage} from '../pages/pages'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; //rootpage: any = TestPage; //not working //rootpage: any = LoginPage; // notworking rootPage: any = HomePage; //works //rootPage: any = ListPage; works constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this.statusBar.styleDefault(); this.splashScreen.hide(); }); } openPage(page) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario this.nav.push(page.component); } }
app.module
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import {AccessHAndSPage} from '../pages/pages'; import {BuildingSelectorPage} from '../pages/pages'; import {CreateEditJobPage} from '../pages/pages'; import {DimensionsPage} from '../pages/pages'; import {FastenersPage} from '../pages/pages'; import {FlashingsPage} from '../pages/pages'; import {FlatRoofPage} from '../pages/pages'; import {GuttersPage} from '../pages/pages'; import {HomePage} from '../pages/pages'; import {IssueAllocatorSelectorPage} from '../pages/pages'; import {JobSelectorPage} from '../pages/pages'; import {ListPage} from '../pages/pages'; import {LoginPage} from '../pages/pages'; import {ParapetCappingPage} from '../pages/pages'; import {PenetrationsPage} from '../pages/pages'; import {RoofLightsPage} from '../pages/pages'; import {RoofSheetsPage} from '../pages/pages'; import {TaskListPage} from '../pages/pages'; import {TerminationFillersPage} from '../pages/pages'; import {TestPage} from '../pages/pages'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ MyApp, LoginPage, AccessHAndSPage, BuildingSelectorPage, CreateEditJobPage, DimensionsPage, FastenersPage, FlashingsPage, FlatRoofPage, GuttersPage, HomePage, IssueAllocatorSelectorPage, JobSelectorPage, ListPage, ParapetCappingPage, PenetrationsPage, RoofLightsPage, RoofSheetsPage, TaskListPage, TerminationFillersPage, TestPage ], imports: [ BrowserModule, // New in ionic 3 IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, LoginPage, AccessHAndSPage, BuildingSelectorPage, CreateEditJobPage, DimensionsPage, FastenersPage, FlashingsPage, FlatRoofPage, GuttersPage, HomePage, IssueAllocatorSelectorPage, JobSelectorPage, ListPage, ParapetCappingPage, PenetrationsPage, RoofLightsPage, RoofSheetsPage, TaskListPage, TerminationFillersPage, TestPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
Login.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; //import {HomePage} from '../pages'; @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } login(){ //this.navCtrl.push(HomePage); } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } }
Login.html
<ion-header> <ion-navbar> <ion-title>Login</ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>Click the link below to login!</p> <button type="button" ion-button (click)="Login()">Login</button> </ion-content>
Ionic Info
cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0 global packages: cordova (Cordova CLI) : 7.1.0 local packages: @ionic/app-scripts : 3.1.6 Cordova Platforms : android 7.0.0 browser 5.0.3 ios 4.5.4 Ionic Framework : ionic-angular 3.9.2 System: ios-deploy : 1.9.2 Node : v8.9.3 npm : 5.6.0 OS : macOS High Sierra Xcode : Xcode 9.1 Build version 9B55 Environment Variables: ANDROID_HOME : not set Misc: backend : pro
Thanks so much for your help i really appreciate it.
Sean Gynane
Posts: 1
Participants: 1