Nested routing in angular 7, using modules and lazy loading

Question

I am having trouble creating angular routes. I have implemented feature modules and I am using routing for each of those modules. I want the routes to go from app to layout to dashboard and then to accounts. The route is not created properly, it seems dashboard is being skipped and route goes directly to accounts. Here is what it looks like when i use augury to debug the routes.

Here is my code for each route. each route is in a module of its own. I would really like to keep the routes separated in modules. Any suggestions would be greatly appreciated.

//app routes

const appRoutes: Routes = [
  { path: "login", component: LoginComponent },
  {
    path: "",
    canActivate: [AuthGaurdService],
    loadChildren: "./layouts/layouts.module#LayoutsModule"
  },
  { path: "**", component: PageNotFoundComponent }
];

//layout routes


const LayoutRoutes: Routes = [
  {
    path: "",
    component: LayoutsComponent,
    canActivate: [AuthGaurdService],
    children: [
      {
        path: "",
        canActivateChild: [AuthGaurdService],
        children: [
          {
            path: "account-information",
            loadChildren: "../account-information/account-information.module#AccountInformationModule"
          },
          {
            path: "",
            loadChildren: "../dashboard/dashboard.module#DashboardModule"
          },
        ]
      }
      
    ]
  }
];

//dashboard routes


const routes: Routes = [
  {
    path: "",
    component: DashboardComponent,
    canActivate: [AuthGaurdService],
    children: [{
      path: "",
      canActivateChild: [AuthGaurdService],
      children: [
        {
          path: "accounts",
          loadChildren: "./accounts/accounts.module#AccountsModule"
        },
        {
          path: "",
          component: HomeComponent
        }
      ]
    }]
  }
];


//account routes

const AccountsRoutes: Routes = [
  {
    path: "accounts",
    component: AccountsComponent,
    canActivate: [AuthGaurdService],
    children: [
      {
        path: "",
        canActivateChild: [AuthGaurdService],
        children: [
          { path: "transactions", component: TransactionsComponent },
          { path: "summary", component: SummaryComponent },
          { path: "earnings", component: EarningsComponent }
        ]
      }

    ]
  }
];

<!--app.html -->
<router-outlet></router-outlet>

<!-- layout.html -->
<div class="page-container">
  <app-navbar></app-navbar>
  <div class="page-content-wrapper ">
    <div class="content">
      <router-outlet></router-outlet>
    </div>
    <div class="container-fluid container-fixed-lg footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

<!-- dashboard.html -->
<div class="page-container">
  <app-navbar></app-navbar>
  <div class="page-content-wrapper ">
    <div class="content">
      <router-outlet></router-outlet>
    </div>
    <div class="container-fluid container-fixed-lg footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>


<!-- accounts -->
<router-outlet></router-outlet>

this is what my page looks like when i to home

this is the for accounts/summary

and my side menu looks like this let retail: Array<Menu> = [ { name: "Home", router_link: "", submenu: [], toggle_submenu: false, icon: "" }, { name: "Accounts", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [ { name: "Summary", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [] }, { name: "Tansactions", router_link: "accounts/transactions", toggle_submenu: false, icon: "", submenu: [] }, { name: "Earnings", router_link: "accounts/earnings", toggle_submenu: false, icon: "", submenu: [] } ] }, { name: "Sales", router_link: "sales", toggle_submenu: false, icon: "", submenu: [] }, { name: "Inventory", router_link: "inventory", toggle_submenu: false, icon: "", submenu: [] }, { name: "Upload", router_link: "upload", toggle_submenu: false, icon: "", submenu: [] } ];

asimhashmi · Accepted Answer · 2019-05-26 08:51:27Z

1

As I havn't seen your complete code, my guess is that your not able to properly navigate to your routes.

When you use lazy loaded modules, you don't need to provide the the prefix in child routes. For example In your AppModule:

{
    path: '', component: HomeComponent
    },
   {path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule' 
  }

And in your DashboardModule

{
    path: '', component: DashboardComponent,
  },{
    path: 'accounts',
    loadChildren: '../accounts/accounts.module#AccountsModule' 
  }

Then in order to go to a route in your dashboard.component.html You will write

<a [routerLink]="['accounts']"> Account</a>

Instead of

<a [routerLink]="['/dashboard', 'accounts']"> Account</a>

because in child lazy loaded modules the root path starts from the parent module which loaded it.

I have created a stackblitz demo with a similar scenario.

Hope it helps.

answered May 26, 2019 at 8:51

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

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

6 Comments

inhaler Over a year ago

Hello Asim thanks for responding, I have added screens and a json of my side menu

inhaler Over a year ago

I am not using /dashboard to route to my dashboard page, i actually use accounts/routehere

asimhashmi Over a year ago

Did you check the demo

inhaler Over a year ago

I did, it is not exactly the way my project is setup, the demo has just one router-outlet but i need a router outlet in layouts and also in dashboard so i can have sidebar and navbar and route contents on the sidebar in there.

asimhashmi Over a year ago

It would be great of you provide a stackblitz of your scenario or you can edit my demo

|

inhaler · Accepted Answer · 2019-05-26 16:47:04Z

0

Hello friends i figured out the issue. I removed the import of accounts module in dashboard module. This made sure that when routes where generated accounts route was placed after dashboard. This is because I am lazy loading the modules. This is what my routes looked like after This is what my routes looked like after

Also make sure to add / in the child routes, so angular appends this route to its parent, ie accounts summary routerlink looks like this in my sidebar '/accounts/summary'.

Every thing else stayed the same. Now my accounts summary component was placed inside of my dashboard router link and i displayed next to my sidebar

answered May 26, 2019 at 16:47

inhaler

4252 gold badges8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Nested routing in angular 7, using modules and lazy loading

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related