I'm currently working on implementing lazy loading in Angular 6, and I want to include links on my main homepage that direct users to specific feature components.
Here is the hierarchy of my project:
app.module.ts
|__homepage.component.ts
|__options.component.ts
|__feature.module.ts
|__buy.component.ts
|__sell.component.ts
From the homepage.component, users should be able to directly access the buy.component and sell.component.
What is the best way to structure the routes or links in the homepage.component to accomplish this?
Currently, my lazy loading routes only point to the module, but the default route '' may not always be what the user wants to see when clicking on "sell" or "buy". I would like to avoid creating a sub-home page for each module...
Below are the routes in my code so far:
app.routing.ts
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'options',
component: OptionsComponent
},
{
path: 'buy',
loadChildren: "../app/posts/feature.module#FeatureModule"
},
{
path: 'sell',
loadChildren: "../app/posts/feature.module#FeatureModule"
}
];
feature.routing.ts
{
path: '',
redirectTo: '/buy',
pathMatch: 'full'
},
{
path: 'buy',
component: BuyComponent
},
{
path: 'sell',
component: SellComponent
}
PS: Feel free to ask if you need any further clarification