Angular Routes not mapping properly for lazy loading

Question

So I have an app with multiple modules that has routes properly put in place, and each module has it's own routes. Everything works fine, until I try to implement lazy loading.

Previous State:

example module

export const EXAMPLE_ROUTES: Routes = [
        { path: 'new', component: AddOpportunityComponent },
        { path: ':id', component: OpportunityProfileComponent,
            children: [
                {
                    path: 'edit/sdg-info', component: SdgInfoComponent
                }

            ]}
];

I import this EXAMPLE_ROUTES in example module

Now I have root level routing as

const APP_ROUTES: Routes = [
    { path: '', component: HomeComponent},
    { path: 'search', component: SearchComponent },
    { path: 'example', component: ExampleComponent, children: [...EXAMPLE_ROUTES], canActivate: [AuthGuard, OnboardedGuard] },
];

export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});

With this setup it works fine

After trying to have lazy loading

example module

const EXAMPLE_ROUTES: Routes = [
        { path: 'new', component: AddOpportunityComponent },
        { path: ':id', component: OpportunityProfileComponent,
            children: [
                {
                    path: 'edit/sdg-info', component: SdgInfoComponent
                }
            ]}
];

export const exampleRouting = RouterModule.forChild(EXAMPLE_ROUTES);

and app routing becomes

const APP_ROUTES: Routes = [
    { path: '', component: HomeComponent},
    { path: 'search', component: SearchComponent },
    { path: 'example', loadChildren: './example/example.module#ExampleModule',  canActivate: [AuthGuard, OnboardedGuard] }

];

export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});

The problem I'm facing is, the example route works fine, now the /search route breaks, as the router for some reason tries to match it with opportunity route (path: ':id')

What might be going wrong here?

Answer 1

This issue can occoure when you first implement your FeatureModule in your RootModule and after a given time you decide you want to load this FeatureModule lazy via loadChildren and you forgot to remove FeatureModule from your imports in your RootModule.

In your case your Routing Configuration will look something like this after compilation (PSEUDO-CODE):

const Routes_CONFIG = [
  { path: '', component: HomeComponent},
  { path: 'search', component: SearchComponent },
  { path: 'example', loadChildren: './example/example.module#ExampleModule',  canActivate: [AuthGuard, OnboardedGuard] }
  { path: 'new', component: AddOpportunityComponent },
  { path: ':id', component: OpportunityProfileComponent,
      children: [
        { path: 'edit/sdg-info', component: SdgInfoComponent }
      ]
  }
]

In your case, when you just enter /search you will match :id OpportunityProfileComponent. That's because the router accepts the first route that matches a navigation request path.