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

Question

Below is my folder structure.

    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

I have imported header & footer component, index.module, lesson.module in app.module and used

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

in index.component.html, lesson1.component.html, lesson2.component.html.

But I get 'app-header' is not a known element error. Can somebody help me to resolve this error?

It works well if I include header and footer components directly in 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,
    FormsModule,
    HttpModule,
    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,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }

Answer 1

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.

Answer 2

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,
....

Answer 3

For my app, the component that I am developing throws this error. I realized that the component itself was not included in app.module. After I put it in the app.module, everything compiles well.

Answer 4

Try to add exports list, Components that you declared.

Example;

@NgModule({
  declarations: [
    **HeaderComponent,
    SidebarComponent,
    FooterComponent**
  ],

  imports: [
    CommonModule
  ]

  ,exports:[
    **HeaderComponent,
    SidebarComponent,
    FooterComponent**
  ]