I'm currently facing an issue with the left side navigation in my home component. The dropdown functionality is not working within one of the routing modules (admin-routing.module.ts). Interestingly, the navigation works perfectly fine in app-routing.module.ts under the path 'home', even though the component file remains the same across both routing modules.
As a newcomer to Angular using version 14v, I have a component named "home" and I've utilized two different routing files:
- app-routing.module.ts
- admin-routing.module.ts
The relevant code snippet from app-routing.module.ts:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'not-found', component: NotFoundComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: 'admin',
loadChildren: () =>
import('./modules/admin/admin.module').then((m) => m.AdminModule)
},
{path:'home', component:HomeComponent},
{ path: '**', component: NotFoundComponent },
];
The corresponding code block from admin-routing.module.ts is as follows:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{ path: 'dashboard', component: DashboardComponent }
]
}
];
In addition, I have also referenced the script file path in angular.json.
The issue arises specifically in the navigation dropdown and toggle functionalities within admin-routing.module.ts under the 'home path'. While hosting these files on my server, I observed that the working navigation link is , whereas the problematic navigation can be accessed at .