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 { }

score 12 · Accepted Answer · edited Apr 03 '19 at 11:52

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.

score 4 · Answer 2 · answered Sep 05 '17 at 11:34

4

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

answered Sep 05 '17 at 11:34

Vega

23,736
20
78
88

1

That will work. But header and footer components are common across all the modules. If i add lessons module in future then it will through an error 'header.component' have been imported in both index and lessons module. Please move that to the higher module where you have imported index and lessons module. – Green Computers Sep 05 '17 at 11:37
Create a new shared module with all the shared components that you will import and declare there and only there. Then import that module in index module, app module, etc.. – Vega Sep 05 '17 at 11:41
Do i need to create that common module under 'common' folder and should import that in 'app.module'? – Green Computers Sep 05 '17 at 11:43
Where to place it is a personal choice :) but probably a good choice. If you need that in app module yes, otherwise leave it for the modules that do – Vega Sep 05 '17 at 11:48
I have imported 'header' and 'footer' component in common.module(placed under common folder') and imported common.module in index.module. But getting same error still.. :( – Green Computers Sep 05 '17 at 11:51
Can i share my screen if you have teamviewer. – Green Computers Sep 05 '17 at 11:52
1

I forgot to export the components. It works now. Thank you so much for your help!! – Green Computers Sep 05 '17 at 12:06
@Green Computers, I thought I did answered your question. What was wrong? – Vega Sep 12 '17 at 08:39

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

2 Answers2