错误：'app-header'不是已知元素：Angular 2

Question

下面是我的文件夹结构。

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 

我已导入头&页脚部件，index.module，lesson.module在app.module和index.component.html，lesson1.component.html，lesson2使用

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

。 component.html。

但我得到'应用程序头'不是已知的元素错误。有人可以帮我解决这个错误。

它工作得很好，如果我直接在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

是什么，它加载你的应用程序的引导程序模块？，如果你想在一个模块内声明的组件，并利用它们在其他模块则需要export它们，这样当你在另一个模块导入模块，它会明白，这些从另一个模块中使用

所以在你的app.module.ts声明，也导出它们，以便索引模块应该明白这些来自其他模块。

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

    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    ], 

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

} 

现在导入app.module索引模块中

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

export class IndexModule { } 

我会说让你的应用程序模块作为引导模块，并进行共享模块和declar所有部件，管道，指令和出口他们。并在您的应用程序模块中导入共享模块并使用所有组件。

Answer 2

你进口，并宣布在app.module头组件，但在index.module，他们不是 “认可” 使用它。

将这些以index.module

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