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?

Can you share your app.module.ts please? Is your ExampleModule imported in app.module? If it is declared in your imports, you have to remove it, because this module is getting loaded asynchronously. — SplitterAlex
– SplitterAlex, Commented Feb 17, 2018 at 11:10
@SplitterAlex Thanks so much bro, that was the issue, I forgot to remove it from app module — Manzur Khan
– Manzur Khan, Commented Feb 17, 2018 at 11:20
I am glad I could help :) I created an answer with some explanation why your search url got matched with your route :id — SplitterAlex
– SplitterAlex, Commented Feb 17, 2018 at 12:14

SplitterAlex · Accepted Answer · 2018-02-17 12:13:03Z

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.

Collectives™ on Stack Overflow

Angular Routes not mapping properly for lazy loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related