Page navigation - ionic

Ionic Framework ionic-v3
1

Hello everyone,

I’m not yet at ease with the Angular programming language, I’m making an identification page, here you have so far my code :

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Connexion page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-item>
  <ion-label color="primary" stacked>Email address :</ion-label>
  <ion-input id="inputEmail" [(ngModel)]="connection_email" type="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label color="primary" stacked>Password :</ion-label>
  <ion-input id="inputPWD" [(ngModel)]="connection_pwd" type="password"></ion-input>
  </ion-item>
<br/>  
  <button type="submit" ion-button full (click)="DoConnection(connection_email, connection_pwd);">Connection</button>
 	<button type="submit" ion-button full (Click)="PWDForgotten()">Password forgotten ?</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../list/list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'

})

export class HomePage {
 
  constructor(){}
  
  DoConnection(var_email, var_pwd){
		if (var_email==undefined || var_email=="")
		{
			alert("The email address is required, please mention it");
		}
		else
		{
			if (var_pwd==undefined || var_pwd=="")
			{
				alert("The password is required, please mention it");
			}
			else
			{
				this.navCtrl.push(SecondPage);
			}
			
		}
  
  
	  
  }
  
  PWDForgotten(){
	  
	  alert("ok");
  }
  
}

I’m using the list.html page to test the navigation but my code doesn’t work, I get the following error message :

Module “C;/ionicProjects/ESS/src/pages/list/list” has no exported member SecondPage

The error comes from this line code :

import { SecondPage } from '../list/list';

Why does the import fails?

Thanks

2

It’s hard to improve on the error message, because only you can know whether the problem is that ../../list/list isn’t where you want to be importing from or SecondPage isn’t what you want to be importing from it, but it’s one of those two problems.

Incidentally, a couple of notes:

  • JavaScript naming conventions say methods and variables should be camelCase, so doConnection() should not start with a capital ‘D’, and var_email et al should not use underscores.
  • You are binding your inputs with [(ngModel)], but I don’t see the properties being defined in HomePage. That is going to be a problem.
  • Once you do add them, there is no need to pass anything to doConnection(). You will have what you need in there already.
  • Validation is easier to do using reactive forms.
  • It is typical UI to do the validation before the submit button is pushed, and in fact to disable the submit button by binding something like [disabled]="!form.valid" on it
1 Like
3

I had a look on there to see how the binding would work and I just managed to make it work, my function has parameter now.

I finally understood the error related to the import, I just understood that on the ts file of the new page, I had to create an exportable class.

SecondPage.ts

import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'SecondPage ',
  templateUrl: 'SecondPage .html'
})

export class SecondPage {

}

SecondPage.module.ts

import { NgModule } from '@angular/core';
import { SecondPage } from './SecondPage';
import {IonicPageModule} from 'ionic-angular';

@NgModule({
  declarations: [
    SecondPage,
  ],
  imports: [
    IonicPageModule.forChild(SecondPage),
  ],
  entryComponents: [
    SecondPage,
  ]
})
export class SecondPageModule {}

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../SecondPage/SecondPage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'

})

export class HomePage {
  connection_email: string;
  connection_pwd: string;
  constructor(public navCtrl: NavController){}
  
  doConnection(){
	  var var_email=this.connection_email;
	  var var_pwd=this.connection_pwd;

		if (var_email==undefined || var_email=="")
		{
			alert("The email address is required, please mention it");
			return;
		}

		if (validateEmail(var_email)==false)
		{
			alert("invalid email address")
			this.connection_email="";
			return;
		}

		if (var_pwd==undefined || var_pwd=="")
			{
				alert("The password is required, please mention it");
			}
		else
			{
				this.navCtrl.push(SecondPage);
			}
		}	  
  }
  
  PWDForgotten(){
	  
	  alert("ok");
  }
  
}

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

But I encounter this new error message :

Runtime Error
Uncaught (in promise) : Error: No component factory found for SecondPage. Did you add it to @NgModule.entryComponents?
noComponentFactoryError@http://localhost:8100/build/vendor.js:3682:34
_Null*ComponentFactoryResolver.prototype.resolveComponentFactory@http://localhost:8100/build/vendor.js:3700:15

I used this project to find how to navigate.

4

When you are lazily loading pages, you do not pass them as naked literals to the nav system. You pass their name as strings. One other bit of generic advice: always use let; never var.

5

I updated my projects and I’m now using the let keyword.
In order by make my project more easier to follow, I uploaded it on my github account, here is the link.

Sorry to say that but I don’t see what you mean by you do not pass them as naked literals to the nav system. You pass their name as strings

EDIT : I updated the home.ts and I have this new error message
Uncaught (in promise) : navigation stack needs at least one root page

6

Ordinary case:

this.nav.push(SomePage);

Lazy loaded case:

this.nav.push('SomePage');
7

I made this correction, in the ts file of the target file, I added this line code :

public rootPage: any = HomePage;

but the problem is still present.

Uncaught (in promise): navigation stack needs at least one root page

8

problem solved by watching this video :