Angular showing me double headers-CodePudding

I have this angular app that will show me two headers.

Here is my app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

Here are my routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { EmployeeComponent } from "./components/employee/employee.component";
import { AppComponent } from "./app.component";

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'employee', component: EmployeeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Here I have some good pictures for you to easily understand the problem.

Here (below) is the front page, the one that I get when I open my app: That's what I want, just the header, probably a simple message to describe my app and a background image. Here is the front page, the one that I get when I open my app

Here (below) is what I get if I click on Employee from the header: Here the problem is solved: just one header and my html code from the Employee component. Here is what I get if I click on Employee from the header

I also tried to have only the router-outlet but then I don't see a way to display the header since that one should be static and the code should change while the users will select a different component.

Thank you for your time in advance! Happy coding to all of you!

CodePudding user response：

The problem here is that you set the path '' to use the AppComponent which is the component that contains the AppHeader. So it will display the <app-header></app-header> and then, the representation of the <router-outlet></router-outlet> will be the AppComponent.html again which contains the <app-header></app-header>.

To solve the issue, you should use another component for the '' path, in fact you should not use AppComponent as the component of any route, as this is the parent component that is always showing.

I know this can be a little confusing to understand, so fell free to ask for further clarification!