how to render header footer to layout page in angular 2?

I want to render header and footer in index.html, but I'm getting this error:

ERROR in ./src/app/app.component.ts Module not found: Error: Can't resolve '' in 'C:\Type_Script_WebStorm\BlastFromThePast\src\app' resolve '' in 'C:\Type_Script_WebStorm\BlastFromThePast\src\app'Parsed request is a module
​

my files are here :- app.component.ts :-

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

@Component({
selector: 'app-root',
templateUrl: `
<app-header></app-header>
`

})
export class AppComponent {
title = 'app';
}


header.component.ts:-

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

@Component({
selector: 'app-header',



templateUrl: './header.component.html'

})
export class HeaderComponent {
title = 'app';
}


index.html :-

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlastFromThePast</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>


app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HeaderComponent } from './header.component';

@NgModule({



declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Continue reading...