Angular router with params

I created a router with a parent route that contains an id and child routes. The problem is that when I want to navigate under my child routes with the tabs, I get an error :

Error: Cannot match any routes. URL Segment: ‘tabs/user/1/overview’. Error: Cannot match any routes. URL Segment: ‘tabs/user/1/overview’.

User router :

export const routes: Routes = [
{
 path: 'user/:id', 
 component: UserdetailComponent,
 resolve: {
  test: dataResolver,
 },
 children: [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
   { path: 'overview', loadChildren: () =>
      import('./overview-module/overview.module').then(
        m => m.OverviewModule
      )
   },
   { path: 'contact', loadChildren: () =>
      import('./contact-module/contact.module').then(
        m => m.ContactModule
      )
   },
 ]}];

export const UserModule: ModuleWithProviders = RouterModule.forChild(
 routes
);

Overview routing :

@NgModule({
 declarations: [OverviewComponent],
 imports: [
    CoreModule,
    RouterModule.forChild([
        {
            path: '',
            component: OverviewComponent,
        }
    ]),
 ],
exports: [OverviewComponent]
})

export class OverviewModule {}

and one button of my tabs :

<ion-button
size="small"
fill="clear"
color="text"
[routerLink]="[userId, 'overview']"

Is it because my child routes are attached to a module that has its own router? How can I solve my problem please?

EDIT : I have tried with a Component and by adding my :userId on each road, I can navigate on a road but I get stuck. I guess it goes into sub routing and can’t find the other routes….

thanks

Answer

I think you need to change your router link to

[routerLink]="['/tabs/user', userId, 'overview']"

we need to specify the parent path first and then we can add the children path. Let me know if it works.

Advertisement

Answer