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.
UsedIonic g page login.
Deleted login.module
Deleted @IonicPage()
Create Pages.ts file for ease export * from './login/login';
Add to app.component and app.module import {LoginPage} from '../pages/pages';
Add to app.component rootpage: any = LoginPage;
Add Login page to declarations and entry components on app.modules
The 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
EDIT: Just swapped the names around calling all the Home files to Login and all the Login pages to Home and i can now set the renamed login page (now called home) as the root but when i add login as root (the original home page) this is now blank. Is there some global list somewhere that needs to be edited now?