Navigate to non-default route of an inner lazy loaded module ( Angular Lazy loaded Module )

Question

I have three lazy modules say A,B and C. B is a lazy loaded module inside A. I need to navigate to a non-default route of module B from C.

Any possibilities .?

Module A routes

const SEARCH_ROUTES: Routes = [
{ path: 'suggested_trips', component: TripListComponent },
{ path: 'shipper',canActivate: [AccountTypeGuard],data: {roles: ACCOUNT_TYPES.SHPR.value}, loadChildren: './search-shipper/search-shipper.module#SearchShipperModule' } // Module B
];

Module B routes

    {
    path: '',
    component: SearchShipperComponent,
    children: [
        {
            path: 'post', component: SearchShipperNegotiateComponent,
            resolve: { tripsData: NegotiateTripsResolveService }, 
            children: [
                { path: NEGOTIATE_STEPS.step1, component: CargoDetailsComponent},
                { path: NEGOTIATE_STEPS.step2, component: CargoMediaComponent },
                { path: NEGOTIATE_STEPS.step3, component: NegotiateComponent },
                { path: '', redirectTo: NEGOTIATE_STEPS.step1, pathMatch: 'full' }
            ]
        }
    ]
}

DeborahK · Accepted Answer · 2018-08-09 17:46:51Z

1

Showing some code would better help us understand your question. I'm not certain what "B is a lazy loaded module inside A" means?

Regardless, you can set up routing to route to any lazy loaded module for any other module. Just set up your routes appropriately. The router will take care to merge your routes and they will all be accessible from anywhere in the application.

So ... would seeing some code help? :-)

app-routing.module

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'products',
                canActivate: [ AuthGuard ],
                data: { preload: true },
                loadChildren: 'app/products/product.module#ProductModule'
            },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', component: PageNotFoundComponent }
        ])
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

product.module (lazy loaded)

RouterModule.forChild([
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id',
    component: ProductDetailComponent
  },
  {
    path: ':id/edit',
    component: ProductEditComponent
  }
])

app.component.html

        <ul class="nav navbar-nav">
            <li routerLinkActive="active">
                <a [routerLink]="['/welcome']">Home</a>
            </li>
            <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a [routerLink]="['/products']">Product List</a>
            </li>
            <li routerLinkActive="active">
                <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
            </li>
        </ul>

Notice that the app component's template routes to both the app modules routes and the lazy loaded module's routes.

This example is a bit more simple than your scenario ... but it is conceptually the same.

answered Aug 9, 2018 at 17:46

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Franklin Pious Over a year ago

added some code. I need to a route to child route of module B from a lazy loaded module C

DeborahK Over a year ago

Just specify the appropriate routerLink as shown in the code above. The routerLink doesn't care which module that the route is in.

Vinod Over a year ago

I have a similar issue in keeping the menu item highlighted when navigating away from the landed component. This solution works great until I navigate away from the List or detail page (where I landed from the app component navigation) to the next component, I am losing the highlight router link active in the app component menu because now the route doesn't match 0/edit for example. Any idea how to address this. Thanks

Ram Kishore K Over a year ago

I'm in the situation and unfortunately this solution does not answer to the question precisely. I'm not able to target a non default route of a lazy component B, from another lazy component C. It always loads the default component of B. The original question is also the same and your answer does not answer this particular scenario.

Collectives™ on Stack Overflow

Navigate to non-default route of an inner lazy loaded module ( Angular Lazy loaded Module )

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related