Routing children concept not working in angular 8

Question

I am creating a website.In my website I am trying to create admin part.Inside my admin module I have more component like login,dashboard,products ect..but in my code admin page is coming but children part not working like http://localhost:4200/admin/adminlogin and http://localhost:4200/admin/admindashboard. I do not know how to use children inside routing.Just I tried but not working. Anyone can find my mistake in my code.

Demo: https://stackblitz.com/edit/angular-fixed-footer-header-zhdjw9?file=app/admin/admin.component.html

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 { }

admin.routing.ts:

const routes: Routes = [ 
{
path: 'admin', component: AdminComponent, children: [
  { path: 'adminlogin', component: AdminLoginComponent},
  { path: 'admindashboard', component: AdminDashboardComponent},
]
}
];

Answer 1

It is not working because of conflict between path for admin which is given in two place . One is in your *.module.ts file and another one in *routing.module.ts .In both the files you have given path="/admin" and in routing u have declared children path also. But while running it is taking from *.module.ts file .So to solve the problem either declare your children in *.module.ts and clear routing.module.ts or move all the route array in routing file from *.module.ts file. This will solve your problem. You can give this snapshot code in *module.ts file

    {
path: 'admin',
component: AdminComponent,children: [
  { path: 'adminlogin', component: AdminLoginComponent},
  { path: 'admindashboard', component: AdminDashboardComponent}
]
}