Why does Angular 2 render app component template twice

Question

I want to display common header and footer throughout my app. But when I try to do it, it gets displayed twice :-

app.component.html

<header>
    Header
</header>
<router-outlet></router-outlet>
<footer>
    Footer
</footer>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

RouterModule.forRoot([
  {path: 'home', component: AppComponent},
  {path: '*', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', redirectTo: 'home', pathMatch: 'full'}
])

Result

Header
Header
Footer
Footer

Last time I solved this problem by creating components for header and footer. I know it will work if I do the same, but I want to understand why this is wrong....

Answer 1

Because the App component is the root component of your application, which is always there, and is also the component displayed, inside this root component, by the router outlet, for the 'home' path. So you're saying the router to display the app component inside the app component.

Create a real, different home component. Don't reuse the root component for your home page.