Currently, I am in the process of building a website and facing some issues with implementing the admin section. Within my admin module, I have various components such as login, dashboard, products, etc. However, I am encountering an issue where the children parts are not functioning properly. For example, the URLs like http://localhost:4200/admin/adminlogin and http://localhost:4200/admin/admindashboard are not displaying correctly. I have attempted to utilize child routing but it seems to not be working as expected. Can anyone identify the mistake in my code?
For a demo, you can check out this link: https://stackblitz.com/edit/angular-fixed-footer-header-zhdjw9?file=app/admin/admin.component.html
Here is the section from app.routing.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component'
import { AboutComponent } from './about/about.component'
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './admin/admin.component';
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
},
{
path: 'about',
component: AboutComponent,
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'admin',
component: AdminComponent,
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
And here is the snippet from admin.routing.ts:
const routes: Routes = [
{
path: 'admin', component: AdminComponent, children: [
{ path: 'adminlogin', component: AdminLoginComponent},
{ path: 'admindashboard', component: AdminDashboardComponent},
]
}
];