[ts] Property 'push' does not exist on type 'NavController'

Ionic Framework ionic-v3
1

I’m trying a simple example in: CLI PRO 4.2.1 and v4-beta.

Then, I have one page, in the sidemenu app.

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController } from '@ionic/angular';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage  { 
  registerCredentials = { email: '', password: '' };

  constructor( private nav: NavController ) { 

  } 

  public createAccount() {
    return this.nav.push('RegisterPage');
  }

}

And show me an error in this.nav.push('RegisterPage');.
it says: [ts] Property 'push' does not exist on type 'NavController'.

it change anything from ionic-v3?

2

push/pop doesn’t exist in v4

you could begin by having a look at following article https://www.joshmorony.com/using-angular-routing-with-ionic-4/

3

Undestand, thanks!
If anyone wants the exact example:
Import and inject Router and use navigateByUrl to path configured in app-routing.module.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NavController, AlertController, LoadingController } from '@ionic/angular';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage  { 
  registerCredentials = { email: '', password: '' };

  constructor( private router: Router ) { 

  } 

  public createAccount() {
    return this.router.navigateByUrl('/register');
  }

}
2 Likes
4

or

this.navController.navigateForward()
this.navController.navigateRoot()
5

Plain old router.navigate works too, and I find its parameter syntax more readable than navigateByUrl's.

6

Didn’t try, may I ask @rapropos, with router.navigate or navigateByUrl's, is the resulting transition animation the same as a navigateForward would be (aka the Android/iOS animation style)?

I noticed, if I remember correctly, for example that the animation of location.back isn’t the same as navigateBack

7

Can’t say that I see any difference between the two. In both cases, the new page seems to swipe up from the bottom (Android).

1 Like
8

cool, thx for the feedback :+1:

9

I think the case is that without a routerDirection being supplied or navigateForward (or similar) being used then the Ionic router will guess at the appropriate transition animation to apply, which will probably be right in most cases but can be wrong.

An example which would probably have the wrong transition animation applied would be if you were to load to a specific page in the app (i.e. there is no navigation history) and then perform a backward navigation without using navigateBack or setting the routerDirection to back. I’ve run into situations where the “forward” animation is applied when navigating backward.

2 Likes
10

Exactly what I noticed

and thinking about it now, it was most probably the case aka no nav history

thx for the feedback :+1: