Angular - multiple routes for a component with loadChildren?

Question

I'm trying to have multiple angular routes for a child component and I must use lazy loading (loadChildren).

/page1/from1 -> MyComponent
/page2/from2 -> MyComponent
/page1/from2 -> no match
/page2/from1 -> no match

As we can see, /page1/from1 and /page2/from2 should show show MyComponent, but /page1/from2 must not route to MyComponent.

Here's what I've tried:

The app routing:

const routes: Routes = [
   { path: 'page1', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
   { path: 'page2', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) }
];

The component module routing:

const routes: Routes = [
   { path: 'from1', component: MyComponentModule }, 
   { path: 'from2', component: MyComponentModule }
];

The problem with this solution

This matches /page1/from2 as well as /page2/from1, which is not what I need. Is there an elegant way to do this?

@ArashHatami No, I have planty of pages like this with specific names but those are just example names. I don't want to use any kind of wildcard matching — Julius
I don't see how I could do that without breaking the lazy loading :-( — Julius

Arash Hatami Arash Hatami · Accepted Answer · 2020-11-22T16:17:39

You can use router parameters

const routes: Routes = [
   { path: 'page/:id', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
];

.

const routes: Routes = [
   { path: 'from/:id', component: MyComponentModule }, 
];

Angular - multiple routes for a component with loadChildren?

1 Answers