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,lesson1.component.html,lesson2.component.html中.

但我得到’app-header’不是已知的元素错误.有人可以帮我解决这个错误.

如果我直接在index.module.ts中包含页眉和页脚组件,它的效果很好

app.module.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 {

 }

index.component.html

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

index.module.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,IndexRoutingModule
  ],declarations: [
    IndexComponent
  ]
})

export class IndexModule { }

lesson.module.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,declarations: [
    IndexComponent
  ]
})

export class IndexModule { }