NavController doesn't work in Ionic 4

Now, to complete the final step and implement those routes in our app-routing.module.ts file, they would look like this:

const routes: Routes = [{ path: '', redirectTo: '/home', pathMatch: 'full' },{ path: 'home', loadChildren: './pages/home/home.module#HomeModule' },{ path: 'products', loadChildren: './pages/products/products.module#ProductsModule'},{ path: 'products/:id', loadChildren: './pages/product-detail/product-detail.module#ProductDetailModule' },{ path: 'products/categories', loadChildren: './pages/product-categories/product-categories.{ path: 'support', loadChildren: './pages/support/support.module#SupportModule' }];

setRoot in html page

<ion-button href="/support" routerDirection="root">

or in class

this.navCtrl.navigateRoot('/support');

Push

<ion-button href="/products/12" routerDirection="forward">

or

this.navCtrl.navigateForward('/products/12');

Pop

<ion-button href="/products" routerDirection="backward">

or

<ion-back-button defaultHref="/products"></ion-back-button>

you can also navigate backwards programatically:

this.navCtrl.navigateBack('/products');

p/s: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

NavController as this is deprecated in IONIC 4.

Structure is like this.

     V3                 V4/src/pages     ->   /src/app/pages/src/models    ->   /src/app/models/src/providers ->   /src/app/providers

• You can use pages if you have pages directory.

• You can use parameters if you want to pass it.

  this.router.navigate('/pages, { locs: this.locId }])');

Example: With Pages directory.

this.router.navigate(['/list'], { locs: this.locId }]);

Example: Without Pages directory and parameters.

this.router.navigate(['/list']);

This link is useful for the tabs.For more Info go through this link.[https://medium.com/modus-create-front-end-development/upgrading-an-ionic-3-application-to-ionic-4-eaf81a53cdea][1]

Extras:

After navigate to new page, we can get the locsId using this.route.snapshot.paramMap.get('locs') by importing private route: ActivatedRoute inside the current page constructor

Example:

export class ListPage implements OnInit {  constructor(private route: ActivatedRoute) {    console.log("this.route.snapshot.paramMap.get : ", this.route.snapshot.paramMap.get('locs'));  }  ngOnInit() {  }}

import { Component } from '@angular/core';import { Router } from '@angular/router';@Component({ ...})export class LoginComponent { constructor(private router: Router){}    navigate(){       this.router.navigate(['/detail'])    }}

for more info click here