Ionic 4 - Angular Router

Question

currently i develop an application with the new beta version 4 of ionic and the tabs layout.

I do not quite understand yet how the navigation with the new angular router works

My app-routing.module.ts is

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'welcome', loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
  { path: 'registration', loadChildren: './pages/auth/registration/registration.module#RegistrationPageModule' },
  { path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

My tabs.router.module.ts is:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { ContactPage } from '../contact/contact.page';
import { EventOverviewPage } from '../event-overview/event-overview.page';
import { EventDetailPage } from '../event-detail/event-detail.page';
import { ProfilPage } from '../profil/profil.page'


const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        path: 'event/:eventId',
        component: EventDetailPage,
        outlet: 'eventOverview'
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

with

router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')

im able to navigate to the Overview page and i can access the eventDetail page with a custom id with:

this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')

At the moment my problem is, that i need to pass more then one parameter to the EventDetailPage. I red that this is possible with the router.navigate([]) function, so i tried

this.router.navigate(['/app/tabs/eventOverview'], { queryParams: { eventId: eventId} });

and

this.router.navigate(['/app/tabs/(eventOverview:event)'], { queryParams: { eventId: eventId} });

but there is always an error thrown when i try to navigate to the EventDetailsPage

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app/tabs' Error: Cannot match any routes. URL Segment: 'app/tabs'

It seems like i haven't completly understood how the routing works.

Would be nice if someone could give me a hint

//edit:

here is an example in stackblitz. https://stackblitz.com/edit/github-ionic4navigation-emxydw

its possible to go to eventDetails by clicking the first time an item in the list of the start screen. If you go back after and try it again, its not working anymore.

and i cant find a way to navigate from the create-event.page to the eventDetails.page.

Answer 1

Did you try following?

this.router.navigate(['/app/pages/tabs/event', { eventId: eventId}]);

because only the route path: 'event/:eventId', supports a query parameter.

Maybe it's worth to take a look at this article, for more informations about angular routing with ionic: https://www.joshmorony.com/using-angular-routing-with-ionic-4/

Answer 2

I can tell you that it is complaining because it does not understand which route to choose...

EDIT

I played around with this for awhile last night and I think you're code is all on the right track.. I think it has to do with the organization / structure of your routing modules.. I think you have the pattern correct at the beginning but you're losing it in the tabs.router.module.ts. The reason for this is that you have it referencing components meant for the event-overview-routing.module.ts and the event-detail-routing.module.ts files.

 children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        //path: 'event/:eventId',
        path: 'eventOverview/eventDetails',
        outlet: 'eventOverview',
        component: EventDetailPage,
        children: [
          {
            path: ':id',
            component: EventDetailPage
          },
           {
            path: ':id/:Status',
            component: EventDetailPage
          }
        ]
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      }

If you want to go to your EventDetailPage, then you have to match the path path: 'event/:eventId'