使用模块和延迟加载在angular 7中嵌套路由

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: [] } ];

Answer 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.

Answer 2

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