angular route children only the first path component works. Help me - angularjs

Question

when I run the program, only the first path is running, ie the first component. When I move, the first path is working again. What do I have to do to make it all work? As the picture shows, Navbar shows the component on the home page, but not the other components. I would be glad if you help.enter image description here
App.Module.ts
#NgModule({
declarations: [
AppComponent,
NavComponent,
LoginComponent,
RegisterComponent,
NavbarComponent,
SidebarComponent,
FooterComponent,
RoleComponent,
RoleAddComponent,
RoleUpdateComponent,
RoleAuthorizationComponent,
RoleMenuComponent,
RoleMenuUpdateComponent,
HomeComponent,
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
],
providers: [AlertifyService],
bootstrap: [AppComponent],
})
export class AppModule {}
**app-routing.module**
const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'register',
component: RegisterComponent,
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: NavbarComponent,
pathMatch: 'full',
},
{
path: '',
component: SidebarComponent,
pathMatch: 'full',
},
{
path: '',
component: FooterComponent,
pathMatch: 'full',
},
],
},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
[1]: https://i.stack.imgur.com/D0RMR.png
[enter image description here][1]enter code here
[1]: https://i.stack.imgur.com/lwxUY.png

Answer 1

Why it is not working?
Basically, in this case, it works fine. Position of angular routes matters.
So u have something like this, you are clicking the home button and your URL change to something like this (localhost.com/home), then the first route is match and you are redirected to NavbarCompoent, work is done so no more redirection to other components.
Read more https://angular.io/guide/router
Solution:
This is one of the many solutions:
1.
Create one more component with or without module for those 3 (Navbar, Sidebar, and Footer Components), style them as you want (use selectors in HTML).
Route for a home component should look like this:
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: **NEWCOMPOENNT**,
},
],
},
Other solutions require using nested router outlets.