I am working on a management system that consists of multiple modules.
The starting point for the application is the login-module. Upon successful login, the user is redirected to the main-module. From the main-module, users can navigate to other modules such as inventory and customers.
However, when changing the route from http://localhost:4200/dashboard to http://localhost:4200/customers, the customers module does not load. It works fine when I route to
http://localhost:4200/customers/customers AppModule
/ \
/ \
login-module --> main-module
/ \
/ \
dashboard-module customers-module
I'm unsure about what I might be doing wrong in this scenario.
Below are some relevant code snippets:
app-component.html
<router-outlet></router-outlet>app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './guards/AuthGuard/auth.guard';
const routes: Routes = [
{
path: "",
redirectTo: '/dashboard',
pathMatch: "full"
},
{
path: "dashboard",
loadChildren: () => import('./modules/main/main.module').then(m => m.MainModule)
},
{
path: "customers",
loadChildren: () => import('./modules/main/main.module').then(m => m.MainModule)
},
{
path: 'login',
loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- main-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/AuthGuard/auth.guard';
import { MainComponent } from './components/main/main.component';
const routes: Routes = [
{
path: '',
component: MainComponent,
loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
canActivate: [AuthGuard]
},
{
path: 'dashboard',
component: MainComponent,
loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
canActivate: [AuthGuard]
},
{
path: 'customers',
component: MainComponent,
loadChildren: () => import('../customers/customers.module').then(m => m.CustomersModule),
canActivate: [AuthGuard]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainRoutingModule { }
- main.component.html
<div class="wrapper default-theme" [ngClass]="getClasses()">
<app-navbar></app-navbar>
<main>
<app-sidebar></app-sidebar>
<div class="pages container-fluid pt-4 pb-4 pl-4 pr-4">
<router-outlet></router-outlet>
<hr>
<app-footer></app-footer>
</div>
<div class="overlay" (click)="toggleSidebar()"></div>
</main>
</div>