Angular 2：组件加载问题

Question

我的项目具有以下结构

我想从“login-component.component.html”调用“header-component.component.html”，但我收到如下错误：

compiler.es5.js：1694未捕获错误：模板解析错误： 'header-component'不是已知元素：

我的 login-component.component.html 如下所示：

    <header-component></header-component>
        I am a login page with above header

我的 header-component.component.html 位于以下位置：

hi I am header

任何人都可以指导我错在哪里吗？

以下是我的login-component.component.ts

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

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}