web-dev-qa-db-ja.com

エラー： 'app-header'は既知の要素ではありません：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

ヘッダーとフッターコンポーネント、index.module、lesson.moduleをapp.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 { }
angularangular2-modules
6
Green Computers

あなたの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モジュールとして作成し、共有モジュールを作成して、すべてのコンポーネント、パイプ、ディレクティブを宣言してエクスポートします。そして、アプリモジュールで共有モジュールをインポートしてすべてのコンポーネント。

8
Aniruddha Das

ヘッダーコンポーネントをapp.moduleにインポートして宣言しましたが、「認識」されないindex.moduleで使用しています。

これらをindex.moduleに移動します

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