错误：“ 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

我已经在app.module中导入了页眉和页脚组件，index.module，lesson.module并使用

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

在index.component.html，lesson1.component.html，lesson2.component.html中。

但是我发现“ app-header”不是已知的元素错误。有人可以帮助我解决此错误吗？

如果我直接在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

您在 app.module 中导入并声明了标头组件，但在 index.module 中使用了它们未被“识别”的地方。

将它们移至index.module

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

Answer 2

您的引导程序模块是什么，它会加载您的应用程序？

如果要在一个模块中声明组件并在另一个模块中使用它们，则需要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 { }

我要说的是将您的应用程序模块作为引导程序模块，并创建一个共享模块，并声明所有组件，管道，指令并导出它们。并在您的应用模块中导入共享模块并使用所有组件。