angular - 错误: 'app-header' is not a known element: Angular 2

下面是我的文件夹结构。

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

最佳答案

您用来引导应用程序的 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 模块，并创建一个共享模块，并声明所有组件，管道，指令并导出它们。并在您的应用模块中导入共享模块并使用所有组件。

关于angular - 错误: 'app-header' is not a known element: Angular 2，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46053834/