Desejo exibir cabeçalho e rodapé comuns em todo o meu aplicativo. Mas quando tento fazer isso, ele é exibido duas vezes: -

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'}
])

Resultado

Header
Header
Footer
Footer

Na última vez, resolvi esse problema criando componentes para cabeçalho e rodapé. Sei que funcionará se fizer o mesmo, mas quero entender por que isso está errado ....