Search code examples
angularionic-frameworkhybrid-mobile-appmobile-applicationionic4

NavController doesn't work in Ionic 4


I'm injecting NavController in my constructor as I want to push a page. But, below code doesn't work in Ionic 4. It was totally okay in Ionic 3.

Constructor

constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
    this.menuCtrl.enable(true);
   }

Method

goToSecondPage()
  {
    this.navCtrl.push(list);
  }

Error


Solution

  • 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/