The headers:
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" [routerLink]="['actu']" routerLinkActive="active">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['todos/'+ userId]" routerLinkActive="active">Todo List</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['profile/'+ userId]" routerLinkActive="active">Profil</a>
</li>
</ul>
The appComponent:
<app-header [userId]="user['id']"></app-header>
<div class="container">
<router-outlet></router-outlet>
</div>
The routing:
const APP_ROUTING: Routes = [
{ path: '', component: AppComponent,
children: [
{ path: '', redirectTo:'actu', pathMatch:"full" },
{ path: 'login', component: LoginComponent },
{ path: 'actu', component: ActuComponent },
{ path: 'todos/:id', component: TodoListComponent },
{path: 'profile/:id',component: MainProfileComponent,
children: [
{ path: '', redirectTo:'posts', pathMatch:"full" },
{ path: 'posts', component: UserPostComponent },
{ path: 'albums', component: UserAlbumComponent },
{ path: 'albums/:id', component: UserPhotoComponent },
],
},
{ path: 'posts/:id/comments', component: PostCommentsComponent },
]
},
{ path: '**', component: ErrorComponent },
];
export const ROUTING = RouterModule.forRoot(APP_ROUTING);
When I debug it: It shows an app-root inside an app-root; I have seen that I may have bootstrap two component but all I bootstraped is The AppComponent
the index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngulApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
