I'm trying to implement angular 6 lazy loading and I would like to have links in my main homepage that points each one to a specific feature component.
My project's hyerarchy is as it follows:
app.module.ts
|__homepage.component.ts
|__options.component.ts
|__feature.module.ts
|__buy.component.ts
|__sell.component.ts
From the homepage.component, user might be able to directly access buy.component and sell.component.
How should the routes or the links in homepage.component be structured in order to achieve this?
As you can notice from my code below, my lazy loading routes only points to the module, but the '' route - which is triggered by default - is not always the one that the user would like to visit (if he/she clicked on "sell", he would like to view sell component and vice versa for "buy") and I would like to avoid creating a sub-home page for each module…
Here's my code on the routes 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: I'll be available for any clarification if needed
