Error: 'app-header' is not a known element: Angular 2

what is your bootstrap module which loads your application?

if you want to declare components in one module and use them in another module you need to export them so that when you will import the module in another module, it will understand that these will be used from another module

so in your app.module.ts declare and also export them so that the index module should understand that these are from other modules.

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

  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],

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

 }

and now import the app.module in your index module

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

export class IndexModule { }

I would say make your app module as a bootstrap module and make a shared module and declare all component, pipes, directive and export them. and in your app module import the shared module and use all the components.

You imported and declared the header component in app.module but use it in index.module where they are not "recognised".

Move these to index.module

import { HeaderComponent } from './common/header/header.component';
...
declarations: [
    HeaderComponent,
....