How to implement routing with id correctly?

Question

I want to route with an Id between the pages. I do so with [routerLink] . But when I run the app I get an error: Error: Cannot find module '../friend/friend-details.module' . I suppose that I didn't type in correctly the path but I wouldn't know what I could try further. So I want to navigate to friend-details and pass on the id so it know which item it was. The friend-details folder is in the friend folder, so the path should actually work.

page.html

 <ion-card *ngFor="let friend of loadedFriends">
 <ion-avatar  [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>

tabs.router.module.ts

   const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,  //render component that holds your tabs
        children: [
           {
        path: 'friend',
        children: [
          {
            path: '',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]
      },

EDIT:

I tried a solution in which I used a click event:

openFriendDetails() {
    this.router.navigate(['friend/:id']);
  }

which I take access from app-routing.module.ts

{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },

The navigation works after this change. But somehow I can't make use of my id since the friend-details page is frozen somehow and I can't change my page anymore.

Answer 1

check your friend-details module path and put id as second router link param. for example : [routerLink]="['/tabs/friend', friend.id]" this will generate the route /tabs/friend/:friendId and you can access by ActivatedRoute.params.friendId into your component

Answer 2

first you need to change your children to this

children: [
          {
            path: '',
            pathMatch: 'full',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]

then also you need to add path: '', component: yourcomponent in your FriendDetailsPageModule routing

Answer 3

You mention that:

The friend-details folder is in the friend folder, so the path should actually work.

Are you being accurate with your words? If so the path should be:

../friend/friend-details/friend-details.module#FriendDetailsPageModule