Angular lazy loading: route to a specific feature component

Question

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

Answer 1

You can create a separate path for feature module say as 'inventory' in app.routing module. And feature module will load its child routes (buy and sell) appropriately. With this you need not specify all your child routes of FeatureModule inside app.routing.module

app.routing

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'options',
    component: OptionsComponent
  },
  {
    path: 'inventory',     // some other path to load feature module
    loadChildren: "../app/posts/feature.module#FeatureModule"  
  }
];

EDIT :

So your routes to feature module would look like

routerLink="/inventory/buy" or routerLink="/inventory/sell" or simply routerLink="/inventory" which will redirect to /inventory/buy

Answer 2

When you make sub feature modules your routes also change.

You should create a route for your feature module and sub route for your component.

Example:

app.routing.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'options',
    component: OptionsComponent
  },
  {
    path: 'feature',
    loadChildren: "../app/posts/feature.module#FeatureModule"
  }
];

feature.routing.ts

  {
    path: '',
    redirectTo: '/buy',
    pathMatch: 'full'
  },
  {
    path: 'buy',
    component: BuyComponent
  },
  {
    path: 'sell',
    component: SellComponent
  }

Navigate to route:

routerLink="/feature/buy"

or

this.router.navigateByUrl("/feature/buy");