錯誤：'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, 
....