Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70747

Basic root page change, but weird problem?

$
0
0

@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.

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

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70747

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>