下面是我的文件夹结构。

app
    - common
         - header
           header.component.css
           header.component.html
           header.component.ts
        - footer
           footer.component.css
           footer.component.html
           footer.component.ts
    - index
      index.component.css
      index.component.ts
      index.component.html
      index.module.ts
   - lessons
     lesson1(another folder)
     lesson2(folder)
     lesson.module.ts   

    app.component.css
    app.component.ts
    app.component.html
    app.module.ts

我已经在app. module中导入了页眉页脚组件、index. module、lesson. module并使用了

<app-header></app-header>
<app-navbar></app-navbar>

在index.component.html、课程1.component.html和课程2.component.html中。
但我得到'app-header'不是一个已知的元素错误。有人能帮我解决这个错误吗？
如果我直接在index.module.ts中包含页眉和页脚组件，效果会很好

• • 应用程序模块. ts**

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import * as $ from 'jquery';

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

import { HeaderComponent } from './common/header/header.component';
import { FooterComponent } from './common/footer/footer.component';

import { IndexModule } from './index/index.module';
import { LessonModule } from './index/lesson.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    IndexModule,
  ],

  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

• • 索引.组件. html**

<app-header></app-header>   <app-navbar></app-navbar>

• • 索引模块ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { IndexComponent } from './index.component';
import { IndexRoutingModule } from './index-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }

• • 课程模块ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { Lesson1Component } from './lesson1.component';
import { Lesson2Component } from './lesson2.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }