Error: 'app-header' is not a known element: 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 中导入并声明了 header 组件，但在 index.module 中使用了它，而不是 "recognised"。

将这些移动到 index.module

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

Answer 2

加载应用程序的 bootstrap 模块是什么？

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

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

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

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

angular2-modules

angular